dystopia-linear-lib 1.0.0

package/dist/components/data-table/DataTablePagination.types.d.ts

@@ -0,0 +1,32 @@
+import type { PaginationState, RowData, Table, TableFeatures, Table_RowModels_Paginated, Table_RowPagination } from '@tanstack/svelte-table';
+import type { PaginationLabels } from '../pagination/index.js';
+import type { PaginationLinkVariantProps } from '../pagination/PaginationLink.variants.js';
+export interface DataTablePaginationLabels extends PaginationLabels {
+    /** Accessible name for the rows-per-page `<select>`. Defaults to "Rows per page". */
+    pageSize?: string;
+}
+export interface DataTablePaginationProps<TFeatures extends TableFeatures, TData extends RowData> {
+    /**
+     * The instance you created yourself via `createTable()` — this component never
+     * calls it internally. Must have composed `rowPaginationFeature` +
+     * `createPaginatedRowModel()` into its `features`.
+     */
+    table: Table<TFeatures, TData> & Table_RowPagination<TFeatures, TData> & Table_RowModels_Paginated<TFeatures, TData> & {
+        /** `TableState`'s `pagination` slice, read reactively — see `@tanstack/svelte-table`'s atoms-based state model. */
+        atoms: {
+            pagination: {
+                get(): PaginationState;
+            };
+        };
+    };
+    /** Selectable page-size values for the rows-per-page control. */
+    pageSizeOptions: number[];
+    class?: string;
+    classes?: {
+        pageSize?: string;
+        pagination?: string;
+    };
+    labels?: DataTablePaginationLabels;
+    /** Density variant, applied to both the rows-per-page select and the pagination controls. Default 'sm' — this component pairs with `DataTable`'s compact rows. */
+    size?: PaginationLinkVariantProps['size'];
+}

package/dist/components/data-table/DataTablePagination.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,6 @@
+export { default as DataTable } from './DataTable.svelte';
+export type { DataTableProps, DataTableLabels } from './DataTable.types.js';
+export { default as DataTableColumnHeader } from './DataTableColumnHeader.svelte';
+export type { DataTableColumnHeaderProps, SortableColumn } from './DataTableColumnHeader.types.js';
+export { default as DataTablePagination } from './DataTablePagination.svelte';
+export type { DataTablePaginationProps, DataTablePaginationLabels } from './DataTablePagination.types.js';

package/dist/components/data-table/index.js

@@ -0,0 +1,3 @@
+export { default as DataTable } from './DataTable.svelte';
+export { default as DataTableColumnHeader } from './DataTableColumnHeader.svelte';
+export { default as DataTablePagination } from './DataTablePagination.svelte';

package/dist/components/date-picker/DatePicker.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { type CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date';
+	import { cn } from '../../utils/cn.js';
+	import { floating } from '../../utils/floating.js';
+	import { portal } from '../../utils/portal.js';
+	import { createPresence } from '../../utils/presence.svelte.js';
+	import { createDismissableLayer } from '../../utils/dismissable-layer.js';
+	import { createIds } from '../../utils/id.js';
+	import { Calendar, type CalendarRangeValue } from '../calendar/index.js';
+	import type { DatePickerProps } from './DatePicker.types.js';
+
+	let {
+		type = 'single',
+		value = $bindable(),
+		name,
+		class: className,
+		classes,
+		locale,
+		defaultMonth,
+		minValue,
+		maxValue,
+		isDateDisabled,
+		labels,
+		disabled = false,
+		invalid = false,
+		portalTarget,
+		onValueChange,
+		...restProps
+	}: DatePickerProps = $props();
+
+	const baseId = $props.id();
+	const ids = createIds(baseId, 'content');
+
+	let open = $state(false);
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let contentEl = $state<HTMLDivElement | null>(null);
+
+	const presence = createPresence(
+		() => open,
+		() => contentEl
+	);
+
+	const resolvedLocale = $derived(
+		locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en-US')
+	);
+	const formatter = $derived(new DateFormatter(resolvedLocale, { dateStyle: 'medium' }));
+
+	const formattedValue = $derived.by(() => {
+		if (type === 'range') {
+			const current = value as CalendarRangeValue | undefined;
+			if (!current?.start) return undefined;
+			const start = formatter.format(current.start.toDate(getLocalTimeZone()));
+			if (!current.end) return start;
+			return `${start} – ${formatter.format(current.end.toDate(getLocalTimeZone()))}`;
+		}
+		const current = value as CalendarDate | undefined;
+		return current ? formatter.format(current.toDate(getLocalTimeZone())) : undefined;
+	});
+
+	function close(): void {
+		open = false;
+	}
+
+	function closeAndFocusTrigger(): void {
+		close();
+		triggerEl?.focus();
+	}
+
+	function toggleOpen(): void {
+		if (!disabled) open = !open;
+	}
+
+	// Enter/Space need no handling here — the trigger is a real `<button>`, so
+	// the browser already synthesizes a `click` (→ `toggleOpen`) for both.
+	// Duplicating that in keydown would toggle twice and immediately re-close.
+	function handleTriggerKeydown(event: KeyboardEvent): void {
+		if (!disabled && event.key === 'ArrowDown') {
+			event.preventDefault();
+			open = true;
+		}
+	}
+
+	function handleSingleValueChange(next: CalendarDate | undefined): void {
+		value = next;
+		(onValueChange as ((value: CalendarDate | undefined) => void) | undefined)?.(next);
+		closeAndFocusTrigger();
+	}
+
+	function handleRangeValueChange(next: CalendarRangeValue): void {
+		value = next;
+		(onValueChange as ((value: CalendarRangeValue) => void) | undefined)?.(next);
+		if (next.end) closeAndFocusTrigger();
+	}
+
+	$effect(() => {
+		if (!open) return;
+
+		// `contentEl` is itself tracked $state, so reading it makes this effect
+		// re-run once the portalled panel actually mounts — see Combobox.svelte
+		// for the same pattern.
+		if (!contentEl) return;
+
+		tick().then(() => {
+			contentEl?.querySelector<HTMLElement>('[role="gridcell"][tabindex="0"]')?.focus();
+		});
+
+		return createDismissableLayer(() => [triggerEl, contentEl], {
+			onPointerDownOutside: close,
+			onEscapeKeydown: (event) => {
+				event.preventDefault();
+				closeAndFocusTrigger();
+			}
+		});
+	});
+
+	const triggerProps = $derived({
+		...restProps,
+		type: 'button' as const,
+		disabled,
+		'aria-haspopup': 'grid' as const,
+		'aria-expanded': open,
+		'aria-controls': ids.content,
+		'aria-invalid': invalid || undefined,
+		'data-invalid': invalid ? '' : undefined,
+		'data-disabled': disabled ? '' : undefined,
+		onclick: toggleOpen,
+		onkeydown: handleTriggerKeydown
+	});
+</script>
+
+<div class={cn('inline-block', className)}>
+	<button
+		bind:this={triggerEl}
+		{...triggerProps}
+		class={cn(
+			'flex h-10 w-full cursor-pointer items-center gap-tight rounded-md border border-border bg-surface px-3 text-left text-sm leading-snug text-foreground-soft transition-colors duration-150 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[invalid]:border-danger-border data-[invalid]:focus-visible:ring-danger',
+			classes?.trigger
+		)}
+	>
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+			class="size-4 shrink-0 text-foreground-faint"
+		>
+			<rect x="3" y="4" width="18" height="18" rx="2" />
+			<path d="M16 2v4M8 2v4M3 10h18" />
+		</svg>
+		<span class={cn('flex-1 truncate', !formattedValue && 'text-foreground-faint')}>
+			{formattedValue ?? labels?.placeholder ?? 'Select date'}
+		</span>
+	</button>
+
+	{#if name}
+		{#if type === 'range'}
+			<input
+				type="hidden"
+				name={`${name}-start`}
+				value={(value as CalendarRangeValue | undefined)?.start?.toString() ?? ''}
+			/>
+			<input
+				type="hidden"
+				name={`${name}-end`}
+				value={(value as CalendarRangeValue | undefined)?.end?.toString() ?? ''}
+			/>
+		{:else}
+			<input type="hidden" {name} value={(value as CalendarDate | undefined)?.toString() ?? ''} />
+		{/if}
+	{/if}
+</div>
+
+{#if presence.current}
+	<div
+		bind:this={contentEl}
+		id={ids.content}
+		data-slot="date-picker-content"
+		data-state={open ? 'open' : 'closed'}
+		inert={!open}
+		use:portal={{ target: portalTarget }}
+		use:floating={{ reference: triggerEl, placement: 'bottom-start', offset: 6 }}
+		class={cn(
+			'z-50 rounded-lg border border-border bg-surface p-compact shadow-sm',
+			classes?.content
+		)}
+	>
+		{#if type === 'range'}
+			<Calendar
+				type="range"
+				value={value as CalendarRangeValue | undefined}
+				locale={resolvedLocale}
+				{defaultMonth}
+				{minValue}
+				{maxValue}
+				{isDateDisabled}
+				labels={{ previousMonth: labels?.previousMonth, nextMonth: labels?.nextMonth }}
+				onValueChange={handleRangeValueChange}
+			/>
+		{:else}
+			<Calendar
+				value={value as CalendarDate | undefined}
+				locale={resolvedLocale}
+				{defaultMonth}
+				{minValue}
+				{maxValue}
+				{isDateDisabled}
+				labels={{ previousMonth: labels?.previousMonth, nextMonth: labels?.nextMonth }}
+				onValueChange={handleSingleValueChange}
+			/>
+		{/if}
+	</div>
+{/if}

package/dist/components/date-picker/DatePicker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DatePickerProps } from './DatePicker.types.js';
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/date-picker/DatePicker.types.d.ts

@@ -0,0 +1,40 @@
+import type { CalendarDate } from '@internationalized/date';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { CalendarRangeValue } from '../calendar/index.js';
+/** All user-facing strings, structured so a consumer can fully localize — never hardcode English here. */
+export interface DatePickerLabels {
+    /** Trigger text when no date is selected yet. */
+    placeholder?: string;
+    previousMonth?: string;
+    nextMonth?: string;
+}
+interface DatePickerBaseProps extends Omit<HTMLButtonAttributes, 'children' | 'value' | 'type'> {
+    class?: string;
+    classes?: {
+        trigger?: string;
+        content?: string;
+    };
+    /** BCP 47 locale used for week-start day, month/weekday, and trigger-value formatting. Defaults to the browser locale. */
+    locale?: string;
+    /** Month shown initially when there's no value to derive it from. Defaults to the current month. */
+    defaultMonth?: CalendarDate;
+    minValue?: CalendarDate;
+    maxValue?: CalendarDate;
+    isDateDisabled?: (date: CalendarDate) => boolean;
+    labels?: DatePickerLabels;
+    /** Renders a hidden input under this name for native form submission. */
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    portalTarget?: HTMLElement | string;
+}
+export type DatePickerProps = DatePickerBaseProps & ({
+    type?: 'single';
+    value?: CalendarDate;
+    onValueChange?: (value: CalendarDate | undefined) => void;
+} | {
+    type: 'range';
+    value?: CalendarRangeValue;
+    onValueChange?: (value: CalendarRangeValue) => void;
+});
+export {};

package/dist/components/date-picker/DatePicker.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DatePicker } from './DatePicker.svelte';
+export type { DatePickerProps, DatePickerLabels } from './DatePicker.types.js';

package/dist/components/date-picker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.svelte';

package/dist/components/dialog/Dialog.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { portal } from '../../utils/portal.js';
+	import { createPresence } from '../../utils/presence.svelte.js';
+	import { createDismissableLayer } from '../../utils/dismissable-layer.js';
+	import { focusTrap } from '../../utils/focus-trap.js';
+	import { lockScroll } from '../../utils/scroll-lock.js';
+	import { createIds } from '../../utils/id.js';
+	import type { DialogProps } from './Dialog.types.js';
+
+	let {
+		classes,
+		open = $bindable(false),
+		portalTarget,
+		labels,
+		trigger,
+		title,
+		description,
+		children,
+		...restProps
+	}: DialogProps = $props();
+
+	const baseId = $props.id();
+	const ids = createIds(baseId, 'title', 'description', 'content');
+
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let contentEl = $state<HTMLDivElement | null>(null);
+	const presence = createPresence(
+		() => open,
+		() => contentEl
+	);
+
+	// Captured with `$effect.pre` — which runs before the DOM patch that mounts
+	// the content — so this reads whatever had focus right before opening,
+	// rather than the content's own first focusable element that `focusTrap`
+	// moves focus to a moment later in the same update.
+	let restoreFocusEl: HTMLElement | null = null;
+	$effect.pre(() => {
+		if (open) restoreFocusEl = document.activeElement as HTMLElement | null;
+	});
+
+	function close() {
+		open = false;
+	}
+
+	$effect(() => {
+		if (!open) return;
+
+		const unlockScroll = lockScroll();
+		const destroyLayer = createDismissableLayer(() => [triggerEl, contentEl], {
+			onPointerDownOutside: close,
+			onEscapeKeydown: (event) => {
+				event.preventDefault();
+				close();
+			}
+		});
+
+		return () => {
+			unlockScroll();
+			destroyLayer();
+			restoreFocusEl?.focus({ preventScroll: true });
+		};
+	});
+
+	const triggerProps = $derived({
+		...restProps,
+		type: 'button' as const,
+		'aria-haspopup': 'dialog' as const,
+		'aria-expanded': open,
+		'aria-controls': ids.content,
+		'data-state': open ? 'open' : 'closed',
+		class: cn(
+			'inline-flex h-10 cursor-pointer items-center justify-center gap-tight rounded-md border border-border px-control-x text-sm leading-snug font-medium text-foreground-soft transition-colors duration-150 hover:bg-surface-subtle focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+			classes?.trigger
+		),
+		onclick: () => (open = !open)
+	});
+</script>
+
+<button bind:this={triggerEl} {...triggerProps}>
+	{@render trigger()}
+</button>
+
+{#if presence.current}
+	<!--
+	  `data-slot` is what index.css hangs the default enter/exit animation on —
+	  a `components`-layer rule, so any `animate-*` utility a consumer passes
+	  through `classes` overrides it. See the block in index.css for why the
+	  default isn't a utility class here.
+	-->
+	<div
+		aria-hidden="true"
+		data-slot="dialog-overlay"
+		data-state={open ? 'open' : 'closed'}
+		use:portal={{ target: portalTarget }}
+		class={cn('fixed inset-0 z-50 bg-foreground/40', classes?.overlay)}
+	></div>
+	<!--
+	  Centering lives on this wrapper, not on the content itself, so the
+	  content's `transform` (and `translate`) stay free for a consumer's enter/
+	  exit animation — the same principle Popover follows by positioning via
+	  `left`/`top`. Centering the content with `-translate-x-1/2` instead would
+	  silently break every consumer animation: Tailwind v4 compiles that to the
+	  standalone `translate` property, which composes *on top of* any
+	  `transform`, so a keyframe re-stating `translate(-50%, -50%)` doubles the
+	  offset and the dialog flies in from off-centre.
+	-->
+	<!--
+	  `focusTrap` sits here rather than on the content, and *after* `portal`:
+	  actions on a child run before the parent is attached, so focusing the
+	  content from its own action would fire while this subtree is still
+	  detached from the document — where `focus()` silently does nothing. The
+	  trap's scope is unchanged either way; the content is this wrapper's only
+	  child.
+	-->
+	<div
+		use:portal={{ target: portalTarget }}
+		use:focusTrap={{ enabled: open }}
+		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4"
+	>
+		<div
+			bind:this={contentEl}
+			id={ids.content}
+			role="dialog"
+			data-slot="dialog-content"
+			aria-modal="true"
+			aria-labelledby={ids.title}
+			aria-describedby={description ? ids.description : undefined}
+			data-state={open ? 'open' : 'closed'}
+			tabindex="-1"
+			inert={!open}
+			class={cn(
+				'pointer-events-auto relative w-full max-w-md rounded-lg border border-border bg-surface p-surface shadow-sm focus-visible:outline-none',
+				classes?.content
+			)}
+		>
+			<h2
+				id={ids.title}
+				class={cn('pr-8 text-lg leading-tight font-medium text-foreground', classes?.title)}
+			>
+				{@render title()}
+			</h2>
+			{#if description}
+				<p
+					id={ids.description}
+					class={cn('mt-1 text-sm leading-snug text-foreground-subtle', classes?.description)}
+				>
+					{@render description()}
+				</p>
+			{/if}
+			<div class="mt-4">
+				{@render children()}
+			</div>
+			<button
+				type="button"
+				onclick={close}
+				aria-label={labels?.close ?? 'Close'}
+				class={cn(
+					'absolute top-4 right-4 inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-foreground-faint transition-colors duration-150 hover:bg-surface-subtle hover:text-foreground-soft focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
+					classes?.close
+				)}
+			>
+				<svg
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+					class="size-4"
+				>
+					<path d="M18 6 6 18" />
+					<path d="m6 6 12 12" />
+				</svg>
+			</button>
+		</div>
+	</div>
+{/if}

package/dist/components/dialog/Dialog.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogProps } from './Dialog.types.js';
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/dialog/Dialog.types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface DialogProps extends Omit<HTMLButtonAttributes, 'children' | 'class' | 'title'> {
+    classes?: {
+        trigger?: string;
+        overlay?: string;
+        content?: string;
+        title?: string;
+        description?: string;
+        close?: string;
+    };
+    open?: boolean;
+    portalTarget?: HTMLElement | string;
+    labels?: {
+        close?: string;
+    };
+    trigger: Snippet;
+    title: Snippet;
+    description?: Snippet;
+    children: Snippet;
+}

package/dist/components/dialog/Dialog.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dialog } from './Dialog.svelte';
+export type { DialogProps } from './Dialog.types.js';

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { default as Dialog } from './Dialog.svelte';