dystopia-linear-lib 1.0.0

package/dist/components/tabs/Tabs.types.js

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

package/dist/components/tabs/TabsContent.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { idFor } from '../../utils/id.js';
+	import { getTabsContext } from './tabs-context.js';
+	import type { TabsContentProps } from './TabsContent.types.js';
+
+	let { value, class: className, children, ...restProps }: TabsContentProps = $props();
+
+	const context = getTabsContext();
+	const selected = $derived(context.getValue() === value);
+</script>
+
+{#if selected}
+	<div
+		id={idFor(context.baseId, 'panel', value)}
+		role="tabpanel"
+		aria-labelledby={idFor(context.baseId, 'tab', value)}
+		tabindex="0"
+		class={cn('text-sm text-foreground-muted focus-visible:outline-none', className)}
+		{...restProps}
+	>
+		{@render children()}
+	</div>
+{/if}

package/dist/components/tabs/TabsContent.svelte.d.ts

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

package/dist/components/tabs/TabsContent.types.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface TabsContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    class?: string;
+    value: string;
+    children: Snippet;
+}

package/dist/components/tabs/TabsContent.types.js

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

package/dist/components/tabs/TabsList.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { createRovingFocus } from '../../utils/roving-focus.js';
+	import { getTabsContext } from './tabs-context.js';
+	import type { TabsListProps } from './TabsList.types.js';
+
+	let { class: className, children, ...restProps }: TabsListProps = $props();
+
+	const context = getTabsContext();
+
+	let listEl = $state<HTMLDivElement | null>(null);
+
+	// Tabs use "automatic activation": moving focus with arrow keys also
+	// selects the tab, unlike a menu's roving focus where focus and selection
+	// are separate steps.
+	const roving = createRovingFocus({
+		getContainer: () => listEl,
+		selector: '[role="tab"]:not(:disabled)'
+	});
+
+	function activateFocused() {
+		const value = (document.activeElement as HTMLElement | null)?.dataset.value;
+		if (value) context.setValue(value);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowRight':
+				event.preventDefault();
+				roving.focusAdjacent(1);
+				activateFocused();
+				break;
+			case 'ArrowLeft':
+				event.preventDefault();
+				roving.focusAdjacent(-1);
+				activateFocused();
+				break;
+			case 'Home':
+				event.preventDefault();
+				roving.focusFirst();
+				activateFocused();
+				break;
+			case 'End':
+				event.preventDefault();
+				roving.focusLast();
+				activateFocused();
+				break;
+		}
+	}
+</script>
+
+<div
+	bind:this={listEl}
+	role="tablist"
+	aria-orientation="horizontal"
+	onkeydown={handleKeydown}
+	class={cn('inline-flex items-center gap-1 rounded-md bg-surface-subtle p-1', className)}
+	{...restProps}
+>
+	{@render children()}
+</div>

package/dist/components/tabs/TabsList.svelte.d.ts

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

package/dist/components/tabs/TabsList.types.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface TabsListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    class?: string;
+    children: Snippet;
+}

package/dist/components/tabs/TabsList.types.js

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

package/dist/components/tabs/TabsTrigger.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { idFor } from '../../utils/id.js';
+	import { getTabsContext } from './tabs-context.js';
+	import type { TabsTriggerProps } from './TabsTrigger.types.js';
+
+	let {
+		value,
+		class: className,
+		disabled = false,
+		children,
+		...restProps
+	}: TabsTriggerProps = $props();
+
+	const context = getTabsContext();
+	const selected = $derived(context.getValue() === value);
+</script>
+
+<button
+	type="button"
+	role="tab"
+	id={idFor(context.baseId, 'tab', value)}
+	aria-selected={selected}
+	aria-controls={idFor(context.baseId, 'panel', value)}
+	data-state={selected ? 'active' : 'inactive'}
+	data-value={value}
+	tabindex={selected ? 0 : -1}
+	{disabled}
+	onclick={() => context.setValue(value)}
+	class={cn(
+		'cursor-pointer rounded-md px-compact py-control-y text-sm leading-snug font-medium text-foreground-subtle transition-colors duration-150 hover:bg-surface-hover hover:text-foreground-soft focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-foreground',
+		className
+	)}
+	{...restProps}
+>
+	{@render children()}
+</button>

package/dist/components/tabs/TabsTrigger.svelte.d.ts

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

package/dist/components/tabs/TabsTrigger.types.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface TabsTriggerProps extends Omit<HTMLButtonAttributes, 'children' | 'class'> {
+    class?: string;
+    value: string;
+    disabled?: boolean;
+    children: Snippet;
+}

package/dist/components/tabs/TabsTrigger.types.js

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

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

@@ -0,0 +1,8 @@
+export { default as Tabs } from './Tabs.svelte';
+export type { TabsProps } from './Tabs.types.js';
+export { default as TabsList } from './TabsList.svelte';
+export type { TabsListProps } from './TabsList.types.js';
+export { default as TabsTrigger } from './TabsTrigger.svelte';
+export type { TabsTriggerProps } from './TabsTrigger.types.js';
+export { default as TabsContent } from './TabsContent.svelte';
+export type { TabsContentProps } from './TabsContent.types.js';

package/dist/components/tabs/index.js

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabsList } from './TabsList.svelte';
+export { default as TabsTrigger } from './TabsTrigger.svelte';
+export { default as TabsContent } from './TabsContent.svelte';

package/dist/components/tabs/tabs-context.d.ts

@@ -0,0 +1,8 @@
+interface TabsContext {
+    baseId: string;
+    getValue: () => string;
+    setValue: (value: string) => void;
+}
+export declare function setTabsContext(context: TabsContext): void;
+export declare function getTabsContext(): TabsContext;
+export {};

package/dist/components/tabs/tabs-context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const TABS_CONTEXT_KEY = Symbol('tabs');
+export function setTabsContext(context) {
+    setContext(TABS_CONTEXT_KEY, context);
+}
+export function getTabsContext() {
+    const context = getContext(TABS_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('Tabs.List/Tabs.Trigger/Tabs.Content must be rendered inside <Tabs>.');
+    }
+    return context;
+}

package/dist/components/text-field/TextField.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { textFieldVariants } from './TextField.variants.js';
+	import type { TextFieldProps } from './TextField.types.js';
+
+	let {
+		variant,
+		size,
+		class: className,
+		classes,
+		ref = $bindable(null),
+		value = $bindable(''),
+		disabled = false,
+		invalid = false,
+		prefix,
+		suffix,
+		...restProps
+	}: TextFieldProps = $props();
+</script>
+
+<div
+	class={cn(textFieldVariants({ variant, size }), className)}
+	data-disabled={disabled ? '' : undefined}
+	data-invalid={invalid ? '' : undefined}
+>
+	{#if prefix}
+		<span
+			class={cn('flex shrink-0 items-center text-foreground-faint [&_svg]:size-4', classes?.prefix)}
+		>
+			{@render prefix()}
+		</span>
+	{/if}
+
+	<input
+		bind:this={ref}
+		bind:value
+		{disabled}
+		aria-invalid={invalid || undefined}
+		class={cn(
+			'h-full min-w-0 flex-1 bg-transparent text-inherit outline-none placeholder:text-foreground-faint disabled:cursor-not-allowed',
+			classes?.input
+		)}
+		{...restProps}
+	/>
+
+	{#if suffix}
+		<span
+			class={cn('flex shrink-0 items-center text-foreground-faint [&_svg]:size-4', classes?.suffix)}
+		>
+			{@render suffix()}
+		</span>
+	{/if}
+</div>

package/dist/components/text-field/TextField.svelte.d.ts

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

package/dist/components/text-field/TextField.types.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { TextFieldVariantProps } from './TextField.variants.js';
+export interface TextFieldProps extends Omit<HTMLInputAttributes, 'size' | 'prefix'>, TextFieldVariantProps {
+    /** Applied to the container element; `classes` targets the inner parts. */
+    class?: string;
+    classes?: {
+        input?: string;
+        prefix?: string;
+        suffix?: string;
+    };
+    ref?: HTMLInputElement | null;
+    value?: string;
+    invalid?: boolean;
+    prefix?: Snippet;
+    suffix?: Snippet;
+}

package/dist/components/text-field/TextField.types.js

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

package/dist/components/text-field/TextField.variants.d.ts

@@ -0,0 +1,6 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const textFieldVariants: (props?: ({
+    variant?: "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TextFieldVariantProps = VariantProps<typeof textFieldVariants>;

package/dist/components/text-field/TextField.variants.js

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority';
+export const textFieldVariants = cva('flex w-full items-center gap-tight rounded-md text-foreground-soft transition-colors duration-150 focus-within:ring-2 focus-within:ring-ring data-[invalid]:border-danger-border data-[invalid]:focus-within:ring-danger data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50', {
+    variants: {
+        variant: {
+            default: 'border border-border bg-surface hover:border-border-hover',
+            ghost: 'border border-transparent bg-surface-subtle hover:bg-surface-hover'
+        },
+        size: {
+            sm: 'h-8 px-3 text-sm',
+            md: 'h-10 px-3 text-sm',
+            lg: 'h-12 px-control-x text-base'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});

package/dist/components/text-field/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TextField } from './TextField.svelte';
+export type { TextFieldProps } from './TextField.types.js';
+export { textFieldVariants, type TextFieldVariantProps } from './TextField.variants.js';

package/dist/components/text-field/index.js

@@ -0,0 +1,2 @@
+export { default as TextField } from './TextField.svelte';
+export { textFieldVariants } from './TextField.variants.js';

package/dist/components/textarea/Textarea.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { textareaVariants } from './Textarea.variants.js';
+	import type { TextareaProps } from './Textarea.types.js';
+
+	let {
+		variant,
+		size,
+		class: className,
+		classes,
+		ref = $bindable(null),
+		value = $bindable(''),
+		disabled = false,
+		invalid = false,
+		maxlength,
+		autoResize = false,
+		...restProps
+	}: TextareaProps = $props();
+
+	const length = $derived(value.length);
+	const atLimit = $derived(typeof maxlength === 'number' && length >= maxlength);
+</script>
+
+<div class={cn('flex flex-col gap-1', className)}>
+	<textarea
+		bind:this={ref}
+		bind:value
+		{disabled}
+		{maxlength}
+		aria-invalid={invalid || undefined}
+		data-invalid={invalid ? '' : undefined}
+		class={cn(
+			textareaVariants({ variant, size }),
+			// field-sizing: content grows the box with input, no scrollbar; drag-resize
+			// would fight that, so it's off. Chromium-only today — unsupported browsers
+			// silently keep the fixed min-height + scroll behavior instead.
+			autoResize && 'field-sizing-content resize-none',
+			classes?.textarea
+		)}
+		{...restProps}></textarea>
+
+	{#if typeof maxlength === 'number'}
+		<span
+			class={cn(
+				'self-end text-xs tabular-nums',
+				atLimit ? 'text-danger' : 'text-foreground-subtle',
+				classes?.counter
+			)}
+		>
+			{length}/{maxlength}
+		</span>
+	{/if}
+</div>

package/dist/components/textarea/Textarea.svelte.d.ts

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

package/dist/components/textarea/Textarea.types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { TextareaVariantProps } from './Textarea.variants.js';
+export interface TextareaProps extends Omit<HTMLTextareaAttributes, 'size'>, TextareaVariantProps {
+    /** Applied to the outermost wrapper, including the character counter. */
+    class?: string;
+    classes?: {
+        textarea?: string;
+        counter?: string;
+    };
+    ref?: HTMLTextAreaElement | null;
+    value?: string;
+    invalid?: boolean;
+    /** Grows the box to fit its content instead of scrolling; disables manual drag-resize. */
+    autoResize?: boolean;
+}

package/dist/components/textarea/Textarea.types.js

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

package/dist/components/textarea/Textarea.variants.d.ts

@@ -0,0 +1,6 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const textareaVariants: (props?: ({
+    variant?: "default" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TextareaVariantProps = VariantProps<typeof textareaVariants>;

package/dist/components/textarea/Textarea.variants.js

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority';
+export const textareaVariants = cva('w-full resize-y rounded-md text-foreground-soft outline-none transition-colors duration-150 placeholder:text-foreground-faint focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:resize-none disabled:opacity-50 data-[invalid]:border-danger-border data-[invalid]:focus-visible:ring-danger', {
+    variants: {
+        variant: {
+            default: 'border border-border bg-surface hover:border-border-hover',
+            ghost: 'border border-transparent bg-surface-subtle hover:bg-surface-hover'
+        },
+        size: {
+            sm: 'min-h-16 p-2 text-sm',
+            md: 'min-h-24 p-3 text-sm',
+            lg: 'min-h-32 p-4 text-base'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});

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

@@ -0,0 +1,3 @@
+export { default as Textarea } from './Textarea.svelte';
+export type { TextareaProps } from './Textarea.types.js';
+export { textareaVariants, type TextareaVariantProps } from './Textarea.variants.js';

package/dist/components/textarea/index.js

@@ -0,0 +1,2 @@
+export { default as Textarea } from './Textarea.svelte';
+export { textareaVariants } from './Textarea.variants.js';

package/dist/components/toast/ToastItem.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import { cn } from '../../utils/cn.js';
+	import { createPresence } from '../../utils/presence.svelte.js';
+	import { toastVariants } from './Toaster.variants.js';
+	import type { ToastRecord } from './toast-store.svelte.js';
+
+	let {
+		toast: item,
+		onDismiss,
+		classes,
+		labels
+	}: {
+		toast: ToastRecord;
+		onDismiss: (id: string) => void;
+		classes?: { item?: string; title?: string; description?: string; close?: string };
+		labels?: { close?: string };
+	} = $props();
+
+	let closing = $state(false);
+	let rootEl = $state<HTMLDivElement | null>(null);
+	const presence = createPresence(
+		() => !closing,
+		() => rootEl
+	);
+
+	function close() {
+		closing = true;
+	}
+
+	// Tracks the timer as elapsed/remaining rather than a single deadline so a
+	// pointer-hover pause can suspend it and resume with the time actually left,
+	// instead of restarting the full duration or firing early.
+	let remainingMs = untrack(() => item.duration);
+	let startedAt = 0;
+	let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+	function schedule() {
+		if (!Number.isFinite(remainingMs) || remainingMs <= 0) return;
+		startedAt = Date.now();
+		timeoutId = setTimeout(close, remainingMs);
+	}
+
+	function pause() {
+		if (timeoutId === undefined) return;
+		clearTimeout(timeoutId);
+		timeoutId = undefined;
+		remainingMs -= Date.now() - startedAt;
+	}
+
+	// Scheduling the initial timer here, rather than in a mount `$effect`,
+	// matches HoverCard's timer handling: it runs synchronously as part of
+	// component init instead of being deferred to the next effect flush, so
+	// there's no window where the component could be torn down before the
+	// timer is ever set.
+	schedule();
+	onDestroy(() => {
+		if (timeoutId !== undefined) clearTimeout(timeoutId);
+	});
+
+	$effect(() => {
+		if (!presence.current) onDismiss(item.id);
+	});
+</script>
+
+{#if presence.current}
+	<div
+		bind:this={rootEl}
+		role={item.variant === 'danger' ? 'alert' : 'status'}
+		aria-atomic="true"
+		data-slot="toast"
+		data-state={closing ? 'closed' : 'open'}
+		onpointerenter={pause}
+		onpointerleave={schedule}
+		class={cn(toastVariants({ variant: item.variant }), classes?.item)}
+	>
+		<div class="min-w-0 flex-1 space-y-1">
+			<p class={cn('leading-snug font-medium text-foreground', classes?.title)}>{item.title}</p>
+			{#if item.description}
+				<p class={cn('leading-snug text-foreground-subtle', classes?.description)}>
+					{item.description}
+				</p>
+			{/if}
+		</div>
+		<button
+			type="button"
+			onclick={close}
+			aria-label={labels?.close ?? 'Close'}
+			class={cn(
+				'inline-flex size-6 shrink-0 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>
+{/if}

package/dist/components/toast/ToastItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ToastRecord } from './toast-store.svelte.js';
+type $$ComponentProps = {
+    toast: ToastRecord;
+    onDismiss: (id: string) => void;
+    classes?: {
+        item?: string;
+        title?: string;
+        description?: string;
+        close?: string;
+    };
+    labels?: {
+        close?: string;
+    };
+};
+declare const ToastItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToastItem = ReturnType<typeof ToastItem>;
+export default ToastItem;

package/dist/components/toast/Toaster.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { portal } from '../../utils/portal.js';
+	import { toastStore } from './toast-store.svelte.js';
+	import ToastItem from './ToastItem.svelte';
+	import type { ToasterProps, ToastPosition } from './Toaster.types.js';
+
+	let {
+		position = 'bottom-right',
+		max = 3,
+		portalTarget,
+		class: className,
+		classes,
+		labels
+	}: ToasterProps = $props();
+
+	const positionClasses: Record<ToastPosition, string> = {
+		'top-left': 'top-0 left-0 items-start',
+		'top-center': 'top-0 left-1/2 -translate-x-1/2 items-center',
+		'top-right': 'top-0 right-0 items-end',
+		'bottom-left': 'bottom-0 left-0 items-start',
+		'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 items-center',
+		'bottom-right': 'bottom-0 right-0 items-end'
+	};
+
+	// DOM order controls stacking direction: the last child sits nearest the
+	// viewport's anchored edge. Newest-last (array order) already reads
+	// correctly for the bottom corners; the top corners need it reversed so
+	// the newest toast still lands next to the edge it's anchored to.
+	const visible = $derived(
+		position.startsWith('top')
+			? toastStore.toasts.slice(-max).reverse()
+			: toastStore.toasts.slice(-max)
+	);
+</script>
+
+<div
+	use:portal={{ target: portalTarget }}
+	role="region"
+	aria-label={labels?.region ?? 'Notifications'}
+	class={cn(
+		'pointer-events-none fixed z-50 flex w-full max-w-sm flex-col gap-cozy p-4',
+		positionClasses[position],
+		className,
+		classes?.viewport
+	)}
+>
+	{#each visible as item (item.id)}
+		<ToastItem toast={item} onDismiss={toastStore.dismiss} {classes} {labels} />
+	{/each}
+</div>

package/dist/components/toast/Toaster.svelte.d.ts

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