dystopia-linear-lib 1.0.0

package/dist/components/drawer/Drawer.svelte

@@ -0,0 +1,157 @@
+<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 { drawerVariants } from './Drawer.variants.js';
+	import type { DrawerProps } from './Drawer.types.js';
+
+	let {
+		classes,
+		open = $bindable(false),
+		side = 'right',
+		portalTarget,
+		labels,
+		trigger,
+		title,
+		description,
+		children,
+		...restProps
+	}: DrawerProps = $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}
+	<!-- Reuses Dialog's overlay animation — same visual role (dimming scrim), no need for a second copy. -->
+	<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>
+	<!--
+	  No centring wrapper needed here unlike Dialog — the content is positioned
+	  by `inset-*` (edge-anchored), not a transform, so `portal` and `focusTrap`
+	  can sit directly on this element without the wrapper trick Dialog needs.
+	-->
+	<div
+		bind:this={contentEl}
+		id={ids.content}
+		role="dialog"
+		data-slot="drawer-content"
+		data-side={side}
+		aria-modal="true"
+		aria-labelledby={ids.title}
+		aria-describedby={description ? ids.description : undefined}
+		data-state={open ? 'open' : 'closed'}
+		tabindex="-1"
+		inert={!open}
+		use:portal={{ target: portalTarget }}
+		use:focusTrap={{ enabled: open }}
+		class={cn(drawerVariants({ side }), 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 min-h-0 flex-1">
+			{@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>
+{/if}

package/dist/components/drawer/Drawer.svelte.d.ts

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

package/dist/components/drawer/Drawer.types.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { DrawerVariantProps } from './Drawer.variants.js';
+export interface DrawerProps extends Omit<HTMLButtonAttributes, 'children' | 'class' | 'title'>, DrawerVariantProps {
+    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/drawer/Drawer.types.js

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

package/dist/components/drawer/Drawer.variants.d.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const drawerVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type DrawerVariantProps = VariantProps<typeof drawerVariants>;

package/dist/components/drawer/Drawer.variants.js

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+export const drawerVariants = cva('fixed z-50 flex flex-col overflow-y-auto border-border bg-surface p-surface shadow-sm focus-visible:outline-none', {
+    variants: {
+        side: {
+            right: 'inset-y-0 right-0 h-full w-full max-w-sm rounded-l-lg border-l',
+            left: 'inset-y-0 left-0 h-full w-full max-w-sm rounded-r-lg border-r',
+            top: 'inset-x-0 top-0 w-full max-h-[80vh] rounded-b-lg border-b',
+            bottom: 'inset-x-0 bottom-0 w-full max-h-[80vh] rounded-t-lg border-t'
+        }
+    },
+    defaultVariants: {
+        side: 'right'
+    }
+});

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

@@ -0,0 +1,3 @@
+export { default as Drawer } from './Drawer.svelte';
+export type { DrawerProps } from './Drawer.types.js';
+export { drawerVariants, type DrawerVariantProps } from './Drawer.variants.js';

package/dist/components/drawer/index.js

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

package/dist/components/dropdown/Dropdown.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	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 { createRovingFocus } from '../../utils/roving-focus.js';
+	import type { DropdownProps } from './Dropdown.types.js';
+
+	let {
+		classes,
+		open = $bindable(false),
+		placement = 'bottom-start',
+		offset = 8,
+		portalTarget,
+		trigger,
+		children,
+		...restProps
+	}: DropdownProps = $props();
+
+	const contentId = $props.id();
+
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let contentEl = $state<HTMLDivElement | null>(null);
+	const presence = createPresence(
+		() => open,
+		() => contentEl
+	);
+	let pendingFocus: 'first' | 'last' | null = null;
+
+	function close() {
+		open = false;
+	}
+
+	// Focus is always moved here programmatically (never by tabbing into the
+	// list), so items stay out of the tab order permanently — no roving
+	// tabindex bookkeeping needed.
+	const roving = createRovingFocus({
+		getContainer: () => contentEl,
+		selector: '[role="menuitem"]:not(:disabled)'
+	});
+
+	function handleContentKeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				roving.focusAdjacent(1);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				roving.focusAdjacent(-1);
+				break;
+			case 'Home':
+				event.preventDefault();
+				roving.focusFirst();
+				break;
+			case 'End':
+				event.preventDefault();
+				roving.focusLast();
+				break;
+			case 'Tab':
+				close();
+				break;
+			default:
+				if (event.key.length === 1 && event.key !== ' ') {
+					roving.typeahead(event.key);
+				}
+		}
+	}
+
+	function handleContentClick(event: MouseEvent) {
+		const target = (event.target as HTMLElement).closest('[role="menuitem"]:not(:disabled)');
+		if (!target) return;
+		close();
+		triggerEl?.focus();
+	}
+
+	function handleTriggerKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+			event.preventDefault();
+			pendingFocus = event.key === 'ArrowDown' ? 'first' : 'last';
+			open = true;
+		}
+	}
+
+	$effect(() => {
+		if (!open) return;
+
+		// `contentEl` is itself tracked $state, so reading it makes this effect
+		// re-run once the portalled menu actually mounts. The first run (right
+		// after `open` flips) fires before that DOM exists — bail out rather
+		// than consuming `pendingFocus` on a run that can't act on it, or the
+		// real run that follows would see it already cleared.
+		if (!contentEl) return;
+
+		if (pendingFocus === 'last') {
+			roving.focusLast();
+		} else {
+			roving.focusFirst();
+		}
+		pendingFocus = null;
+
+		return createDismissableLayer(() => [triggerEl, contentEl], {
+			onPointerDownOutside: close,
+			onEscapeKeydown: (event) => {
+				event.preventDefault();
+				close();
+				triggerEl?.focus();
+			}
+		});
+	});
+
+	const triggerProps = $derived({
+		...restProps,
+		type: 'button' as const,
+		'aria-haspopup': 'menu' as const,
+		'aria-expanded': open,
+		'aria-controls': contentId,
+		'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),
+		onkeydown: handleTriggerKeydown
+	});
+</script>
+
+<button bind:this={triggerEl} {...triggerProps}>
+	{@render trigger()}
+</button>
+
+{#if presence.current}
+	<div
+		bind:this={contentEl}
+		id={contentId}
+		role="menu"
+		tabindex="-1"
+		data-state={open ? 'open' : 'closed'}
+		inert={!open}
+		onkeydown={handleContentKeydown}
+		onclick={handleContentClick}
+		use:portal={{ target: portalTarget }}
+		use:floating={{ reference: triggerEl, placement, offset }}
+		class={cn(
+			'z-50 min-w-40 rounded-lg border border-border bg-surface p-1 text-sm text-foreground-muted shadow-sm focus-visible:outline-none',
+			classes?.content
+		)}
+	>
+		{@render children()}
+	</div>
+{/if}

package/dist/components/dropdown/Dropdown.svelte.d.ts

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

package/dist/components/dropdown/Dropdown.types.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { Placement } from '@floating-ui/dom';
+export interface DropdownProps extends Omit<HTMLButtonAttributes, 'children' | 'class'> {
+    classes?: {
+        trigger?: string;
+        content?: string;
+    };
+    open?: boolean;
+    placement?: Placement;
+    offset?: number;
+    portalTarget?: HTMLElement | string;
+    trigger: Snippet;
+    children: Snippet;
+}

package/dist/components/dropdown/Dropdown.types.js

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

package/dist/components/dropdown/DropdownItem.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { DropdownItemProps } from './DropdownItem.types.js';
+
+	let {
+		class: className,
+		disabled = false,
+		onSelect,
+		children,
+		...restProps
+	}: DropdownItemProps = $props();
+
+	const itemProps = $derived({
+		...restProps,
+		type: 'button' as const,
+		role: 'menuitem' as const,
+		tabindex: -1,
+		disabled,
+		class: cn(
+			'flex w-full items-center gap-tight rounded-md px-compact py-2 text-left text-sm text-foreground-soft transition-colors duration-150 hover:bg-surface-subtle focus-visible:bg-surface-subtle focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+			className
+		),
+		onclick: () => {
+			if (!disabled) onSelect?.();
+		}
+	});
+</script>
+
+<button {...itemProps}>
+	{@render children()}
+</button>

package/dist/components/dropdown/DropdownItem.svelte.d.ts

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

package/dist/components/dropdown/DropdownItem.types.d.ts

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

package/dist/components/dropdown/DropdownItem.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as Dropdown } from './Dropdown.svelte';
+export type { DropdownProps } from './Dropdown.types.js';
+export { default as DropdownItem } from './DropdownItem.svelte';
+export type { DropdownItemProps } from './DropdownItem.types.js';

package/dist/components/dropdown/index.js

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

package/dist/components/empty-state/EmptyState.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { EmptyStateProps } from './EmptyState.types.js';
+
+	let {
+		class: className,
+		classes,
+		icon,
+		title,
+		description,
+		children,
+		...restProps
+	}: EmptyStateProps = $props();
+</script>
+
+<div
+	role="status"
+	class={cn('flex flex-col items-center gap-cozy px-surface py-12 text-center', className)}
+	{...restProps}
+>
+	{#if icon}
+		<span aria-hidden="true" class={cn('text-foreground-faint [&_svg]:size-10', classes?.icon)}>
+			{@render icon()}
+		</span>
+	{/if}
+	{#if title}
+		<p class={cn('leading-snug font-medium text-foreground', classes?.title)}>
+			{@render title()}
+		</p>
+	{/if}
+	{#if description}
+		<p class={cn('max-w-sm text-sm leading-snug text-foreground-subtle', classes?.description)}>
+			{@render description()}
+		</p>
+	{/if}
+	{@render children?.()}
+</div>

package/dist/components/empty-state/EmptyState.svelte.d.ts

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

package/dist/components/empty-state/EmptyState.types.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    class?: string;
+    classes?: {
+        icon?: string;
+        title?: string;
+        description?: string;
+    };
+    /** Decorative — gets `aria-hidden="true"` automatically. */
+    icon?: Snippet;
+    title?: Snippet;
+    description?: Snippet;
+    /** Extra content below the description — typically a call-to-action button. */
+    children?: Snippet;
+}

package/dist/components/empty-state/EmptyState.types.js

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

package/dist/components/empty-state/index.d.ts

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

package/dist/components/empty-state/index.js

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

package/dist/components/helper-text/HelperText.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { HelperTextProps } from './HelperText.types.js';
+
+	let { invalid = false, class: className, children, ...restProps }: HelperTextProps = $props();
+</script>
+
+<p
+	role={invalid ? 'alert' : undefined}
+	data-invalid={invalid ? '' : undefined}
+	class={cn('text-sm leading-snug', invalid ? 'text-danger' : 'text-foreground-subtle', className)}
+	{...restProps}
+>
+	{@render children()}
+</p>

package/dist/components/helper-text/HelperText.svelte.d.ts

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

package/dist/components/helper-text/HelperText.types.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface HelperTextProps extends HTMLAttributes<HTMLParagraphElement> {
+    class?: string;
+    /** Switches styling to the danger color and announces the text as a validation error. */
+    invalid?: boolean;
+    children: Snippet;
+}

package/dist/components/helper-text/HelperText.types.js

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

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

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

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

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