dystopia-linear-lib 1.0.0

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

@@ -0,0 +1,20 @@
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToasterProps {
+    /** Corner the toast viewport renders in. Default `'bottom-right'`. */
+    position?: ToastPosition;
+    /** Max toasts shown at once; the rest wait offscreen until room frees up. Default `3`. */
+    max?: number;
+    portalTarget?: HTMLElement | string;
+    class?: string;
+    classes?: {
+        viewport?: string;
+        item?: string;
+        title?: string;
+        description?: string;
+        close?: string;
+    };
+    labels?: {
+        close?: string;
+        region?: string;
+    };
+}

package/dist/components/toast/Toaster.types.js

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

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

@@ -0,0 +1,5 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const toastVariants: (props?: ({
+    variant?: "default" | "danger" | "warning" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToastVariantProps = VariantProps<typeof toastVariants>;

package/dist/components/toast/Toaster.variants.js

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+export const toastVariants = cva('pointer-events-auto flex w-full gap-loose rounded-lg border bg-surface p-4 text-sm shadow-sm', {
+    variants: {
+        variant: {
+            default: 'border-border text-foreground-muted',
+            danger: 'border-danger-border text-foreground-muted',
+            warning: 'border-warning-border text-foreground-muted',
+            success: 'border-success-border text-foreground-muted'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});

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

@@ -0,0 +1,4 @@
+export { default as Toaster } from './Toaster.svelte';
+export type { ToasterProps, ToastPosition } from './Toaster.types.js';
+export { toastVariants, type ToastVariantProps } from './Toaster.variants.js';
+export { toast, type ToastVariant, type ToastOptions } from './toast-store.svelte.js';

package/dist/components/toast/index.js

@@ -0,0 +1,3 @@
+export { default as Toaster } from './Toaster.svelte';
+export { toastVariants } from './Toaster.variants.js';
+export { toast } from './toast-store.svelte.js';

package/dist/components/toast/toast-store.svelte.d.ts

@@ -0,0 +1,28 @@
+export type ToastVariant = 'default' | 'danger' | 'warning' | 'success';
+export interface ToastOptions {
+    description?: string;
+    /** ms before auto-dismiss; 0 (or `Infinity`) disables it. Default 5000. */
+    duration?: number;
+}
+export interface ToastRecord extends ToastOptions {
+    id: string;
+    title: string;
+    variant: ToastVariant;
+    duration: number;
+}
+declare function dismiss(id: string): void;
+declare function dismissAll(): void;
+export declare const toastStore: {
+    readonly toasts: ToastRecord[];
+    dismiss: typeof dismiss;
+    dismissAll: typeof dismissAll;
+};
+export declare const toast: {
+    message: (title: string, options?: ToastOptions) => string;
+    success: (title: string, options?: ToastOptions) => string;
+    warning: (title: string, options?: ToastOptions) => string;
+    danger: (title: string, options?: ToastOptions) => string;
+    dismiss: typeof dismiss;
+    dismissAll: typeof dismissAll;
+};
+export {};

package/dist/components/toast/toast-store.svelte.js

@@ -0,0 +1,34 @@
+const DEFAULT_DURATION = 5000;
+let toasts = $state([]);
+function add(variant, title, options) {
+    const id = crypto.randomUUID();
+    toasts.push({
+        id,
+        title,
+        variant,
+        description: options?.description,
+        duration: options?.duration ?? DEFAULT_DURATION
+    });
+    return id;
+}
+function dismiss(id) {
+    toasts = toasts.filter((toast) => toast.id !== id);
+}
+function dismissAll() {
+    toasts = [];
+}
+export const toastStore = {
+    get toasts() {
+        return toasts;
+    },
+    dismiss,
+    dismissAll
+};
+export const toast = {
+    message: (title, options) => add('default', title, options),
+    success: (title, options) => add('success', title, options),
+    warning: (title, options) => add('warning', title, options),
+    danger: (title, options) => add('danger', title, options),
+    dismiss,
+    dismissAll
+};

package/dist/components/toggle/Toggle.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { toggleVariants } from './Toggle.variants.js';
+	import type { ToggleProps } from './Toggle.types.js';
+
+	let {
+		variant,
+		size,
+		class: className,
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		disabled = false,
+		children,
+		...restProps
+	}: ToggleProps = $props();
+</script>
+
+<button
+	type="button"
+	bind:this={ref}
+	{disabled}
+	aria-pressed={pressed}
+	data-state={pressed ? 'on' : 'off'}
+	onclick={() => (pressed = !pressed)}
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+>
+	{@render children()}
+</button>

package/dist/components/toggle/Toggle.svelte.d.ts

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

package/dist/components/toggle/Toggle.types.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ToggleVariantProps } from './Toggle.variants.js';
+export interface ToggleProps extends Omit<HTMLButtonAttributes, 'type'>, ToggleVariantProps {
+    class?: string;
+    ref?: HTMLButtonElement | null;
+    pressed?: boolean;
+    children: Snippet;
+}

package/dist/components/toggle/Toggle.types.js

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

package/dist/components/toggle/Toggle.variants.d.ts

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

package/dist/components/toggle/Toggle.variants.js

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority';
+export const toggleVariants = cva('inline-flex items-center justify-center gap-tight appearance-none cursor-pointer rounded-md font-medium text-foreground-soft transition-colors duration-150 hover:bg-surface-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-primary/10 data-[state=on]:text-primary data-[state=on]:hover:bg-primary/15', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border border-border bg-transparent'
+        },
+        size: {
+            sm: 'h-8 px-3 text-sm',
+            md: 'h-10 px-control-x text-sm',
+            lg: 'h-12 px-6 text-base'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});

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

@@ -0,0 +1,3 @@
+export { default as Toggle } from './Toggle.svelte';
+export type { ToggleProps } from './Toggle.types.js';
+export { toggleVariants, type ToggleVariantProps } from './Toggle.variants.js';

package/dist/components/toggle/index.js

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

package/dist/components/tooltip/Tooltip.svelte

@@ -0,0 +1,113 @@
+<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 type { TooltipProps } from './Tooltip.types.js';
+
+	let {
+		classes,
+		open = $bindable(false),
+		placement = 'top',
+		offset = 8,
+		delayDuration = 700,
+		showArrow = false,
+		portalTarget,
+		content,
+		children,
+		...restProps
+	}: TooltipProps = $props();
+
+	const contentId = $props.id();
+
+	let triggerEl = $state<HTMLSpanElement | null>(null);
+	let contentEl = $state<HTMLDivElement | null>(null);
+	let arrowEl = $state<HTMLDivElement | null>(null);
+	const presence = createPresence(
+		() => open,
+		() => contentEl
+	);
+
+	let showTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function scheduleShow() {
+		if (open) return;
+		clearTimeout(showTimer);
+		showTimer = setTimeout(() => (open = true), delayDuration);
+	}
+
+	function showNow() {
+		clearTimeout(showTimer);
+		open = true;
+	}
+
+	function hide() {
+		clearTimeout(showTimer);
+		open = false;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') hide();
+	}
+
+	// `children` is often an existing interactive element (a button, a link) —
+	// that's what actually receives focus, not this wrapping span. Screen
+	// readers only announce `aria-describedby` on the focused element, so it
+	// has to land on the real focusable descendant when there is one, not on
+	// the span. Plain-text content has no such descendant and falls back to
+	// the span itself.
+	$effect(() => {
+		if (!triggerEl) return;
+
+		const describedTarget =
+			triggerEl.querySelector<HTMLElement>(
+				'button, a[href], input, select, textarea, [tabindex]'
+			) ?? triggerEl;
+		describedTarget.setAttribute('aria-describedby', contentId);
+
+		return () => {
+			describedTarget.removeAttribute('aria-describedby');
+		};
+	});
+
+	const triggerProps = $derived({
+		...restProps,
+		'data-state': open ? 'open' : 'closed',
+		class: cn('inline-flex', classes?.trigger),
+		onmouseenter: scheduleShow,
+		onmouseleave: hide,
+		onfocusin: showNow,
+		onfocusout: hide,
+		onkeydown: handleKeydown
+	});
+</script>
+
+<span bind:this={triggerEl} {...triggerProps}>
+	{@render children()}
+</span>
+
+{#if presence.current}
+	<div
+		bind:this={contentEl}
+		id={contentId}
+		role="tooltip"
+		data-state={open ? 'open' : 'closed'}
+		use:portal={{ target: portalTarget }}
+		use:floating={{ reference: triggerEl, placement, offset, arrowEl: showArrow ? arrowEl : null }}
+		class={cn(
+			'group pointer-events-none z-50 rounded-md bg-foreground px-2 py-1 text-xs text-surface shadow-sm',
+			classes?.content
+		)}
+	>
+		{@render content()}
+		{#if showArrow}
+			<div
+				bind:this={arrowEl}
+				class={cn(
+					'absolute size-2 rotate-45 bg-foreground group-data-[placement=bottom]:-top-1 group-data-[placement=left]:-right-1 group-data-[placement=right]:-left-1 group-data-[placement=top]:-bottom-1',
+					classes?.arrow
+				)}
+			></div>
+		{/if}
+	</div>
+{/if}

package/dist/components/tooltip/Tooltip.svelte.d.ts

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

package/dist/components/tooltip/Tooltip.types.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Placement } from '@floating-ui/dom';
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> {
+    classes?: {
+        trigger?: string;
+        content?: string;
+        arrow?: string;
+    };
+    open?: boolean;
+    placement?: Placement;
+    offset?: number;
+    /** Hover delay in ms before the tooltip shows. Focus shows it instantly. */
+    delayDuration?: number;
+    showArrow?: boolean;
+    portalTarget?: HTMLElement | string;
+    content: Snippet;
+    children: Snippet;
+}

package/dist/components/tooltip/Tooltip.types.js

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

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

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

package/dist/components/tooltip/index.js

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

package/dist/components/typography/Typography.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { typographyVariants } from './Typography.variants.js';
+	import type { TypographyElement, TypographyProps } from './Typography.types.js';
+	import type { TypographyVariantProps } from './Typography.variants.js';
+
+	const elementForVariant: Record<
+		NonNullable<TypographyVariantProps['variant']>,
+		TypographyElement
+	> = {
+		h1: 'h1',
+		h2: 'h2',
+		h3: 'h3',
+		h4: 'h4',
+		body: 'p',
+		small: 'small',
+		muted: 'p'
+	};
+
+	let {
+		variant = 'body',
+		as,
+		class: className,
+		children,
+		...restProps
+	}: TypographyProps = $props();
+
+	const tag = $derived(as ?? elementForVariant[variant ?? 'body']);
+</script>
+
+<svelte:element this={tag} class={cn(typographyVariants({ variant }), className)} {...restProps}>
+	{@render children()}
+</svelte:element>

package/dist/components/typography/Typography.svelte.d.ts

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

package/dist/components/typography/Typography.types.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TypographyVariantProps } from './Typography.variants.js';
+export type TypographyElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label' | 'strong' | 'small';
+export interface TypographyProps extends HTMLAttributes<HTMLElement>, TypographyVariantProps {
+    class?: string;
+    /** Overrides the element the variant would otherwise imply, leaving the styling untouched. */
+    as?: TypographyElement;
+    children: Snippet;
+}

package/dist/components/typography/Typography.types.js

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

package/dist/components/typography/Typography.variants.d.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const typographyVariants: (props?: ({
+    variant?: "body" | "h1" | "h2" | "h3" | "h4" | "small" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TypographyVariantProps = VariantProps<typeof typographyVariants>;

package/dist/components/typography/Typography.variants.js

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+export const typographyVariants = cva('', {
+    variants: {
+        variant: {
+            h1: 'text-2xl leading-tight font-semibold tracking-tight text-foreground',
+            h2: 'text-xl leading-tight font-semibold tracking-tight text-foreground',
+            h3: 'text-lg leading-tight font-medium text-foreground',
+            h4: 'text-base leading-tight font-medium text-foreground',
+            body: 'text-sm text-foreground-muted',
+            small: 'text-xs leading-snug text-foreground-muted',
+            muted: 'text-sm text-foreground-subtle'
+        }
+    },
+    defaultVariants: {
+        variant: 'body'
+    }
+});

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

@@ -0,0 +1,3 @@
+export { default as Typography } from './Typography.svelte';
+export type { TypographyProps, TypographyElement } from './Typography.types.js';
+export { typographyVariants, type TypographyVariantProps } from './Typography.variants.js';

package/dist/components/typography/index.js

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