@widgetic/design-system 0.5.21 → 0.5.23

package/dist/components/shell/Link.svelte

@@ -0,0 +1,63 @@
+<!--
+	Figma: Link (component set 232:35, page Auth)
+-->
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { VariantProps } from 'tailwind-variants';
+
+	export const linkVariants = tv({
+		base: 'inline-flex items-center gap-1 text-primary transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]',
+		variants: {
+			size: {
+				default: 'text-body-medium',
+				small: 'text-caption-medium'
+			}
+		},
+		defaultVariants: {
+			size: 'default'
+		}
+	});
+
+	export type LinkSize = VariantProps<typeof linkVariants>['size'];
+
+	export type LinkProps = WithElementRef<HTMLAnchorAttributes> & {
+		ref?: HTMLAnchorElement | null;
+		class?: string;
+		href: string;
+		label: string;
+		size?: LinkSize;
+		external?: boolean;
+	};
+</script>
+
+<script lang="ts">
+	import IconExternalLink from '@tabler/icons-svelte/icons/external-link';
+	import { cn, tv } from '../../utils.js';
+	import { externalLinkAttributes } from './link-external.js';
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		href,
+		label,
+		size = 'default',
+		external = false,
+		...restProps
+	}: LinkProps = $props();
+
+	const externalAttrs = $derived(external ? externalLinkAttributes() : {});
+</script>
+
+<a
+	bind:this={ref}
+	{href}
+	class={cn(linkVariants({ size }), className)}
+	{...externalAttrs}
+	{...restProps}
+>
+	<span>{label}</span>
+	{#if external}
+		<IconExternalLink aria-hidden="true" />
+	{/if}
+</a>

package/dist/components/shell/Link.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { VariantProps } from 'tailwind-variants';
+export declare const linkVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        small: string;
+    };
+}, undefined, "inline-flex items-center gap-1 text-primary transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        size?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
+    };
+}, {
+    size: {
+        default: string;
+        small: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        small: string;
+    };
+}, undefined, "inline-flex items-center gap-1 text-primary transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        default: string;
+        small: string;
+    };
+}, {
+    size: {
+        default: string;
+        small: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type LinkSize = VariantProps<typeof linkVariants>['size'];
+export type LinkProps = WithElementRef<HTMLAnchorAttributes> & {
+    ref?: HTMLAnchorElement | null;
+    class?: string;
+    href: string;
+    label: string;
+    size?: LinkSize;
+    external?: boolean;
+};
+declare const Link: import("svelte").Component<LinkProps, {}, "ref">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/shell/NavDrawer.svelte

@@ -0,0 +1,117 @@
+<!-- Figma: Responsive app shell — mobile/tablet nav drawer (ledger decisions.appShell). -->
+<script lang="ts">
+	import { tick } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils.js';
+	import {
+		getFocusableElements,
+		navDrawerEffectiveTransitionMs,
+		navDrawerTabTarget,
+		navDrawerTransitionEasing
+	} from './shell-utils.js';
+
+	let {
+		open = $bindable(false),
+		class: className,
+		onClose,
+		children
+	}: {
+		open?: boolean;
+		class?: string;
+		onClose?: () => void;
+		children?: Snippet;
+	} = $props();
+
+	let mounted = $state(false);
+	let visible = $state(false);
+	let panelRef = $state<HTMLElement | null>(null);
+	let reducedMotion = $state(false);
+
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+		const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+		const sync = () => {
+			reducedMotion = mq.matches;
+		};
+		sync();
+		mq.addEventListener('change', sync);
+		return () => mq.removeEventListener('change', sync);
+	});
+
+	const transitionMs = $derived(navDrawerEffectiveTransitionMs(visible, reducedMotion));
+	const transitionEase = $derived(navDrawerTransitionEasing(visible));
+
+	$effect(() => {
+		if (open) {
+			mounted = true;
+			void tick().then(() => {
+				visible = true;
+				void tick().then(() => {
+					if (!panelRef) return;
+					const first = getFocusableElements(panelRef)[0];
+					first?.focus();
+				});
+			});
+			return;
+		}
+		visible = false;
+		const closeMs = navDrawerEffectiveTransitionMs(false, reducedMotion);
+		const timer = window.setTimeout(() => {
+			mounted = false;
+		}, closeMs);
+		return () => window.clearTimeout(timer);
+	});
+
+	function close() {
+		open = false;
+		onClose?.();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!open || !mounted) return;
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			close();
+			return;
+		}
+		if (e.key !== 'Tab' || !panelRef) return;
+		const active = document.activeElement;
+		if (!(active instanceof HTMLElement) || !panelRef.contains(active)) return;
+		const next = navDrawerTabTarget(panelRef, active, e.shiftKey);
+		if (!next) return;
+		e.preventDefault();
+		next.focus();
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if mounted}
+	<div class="fixed inset-0 z-40 lg:hidden" role="presentation">
+		<button
+			type="button"
+			class={cn(
+				'bg-foreground/50 absolute inset-0 motion-reduce:transition-none',
+				visible ? 'opacity-100' : 'opacity-0'
+			)}
+			style="transition: opacity {transitionMs}ms {transitionEase};"
+			aria-label="Close navigation"
+			tabindex={visible ? 0 : -1}
+			onclick={close}
+		></button>
+		<div
+			bind:this={panelRef}
+			class={cn(
+				'w-sidebar border-border bg-sidebar absolute inset-y-0 start-0 z-50 flex flex-col border-e shadow-none motion-reduce:transition-none',
+				visible ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full',
+				className
+			)}
+			style="transition: transform {transitionMs}ms {transitionEase};"
+			role="dialog"
+			aria-modal="true"
+			aria-label="Navigation"
+		>
+			{@render children?.()}
+		</div>
+	</div>
+{/if}

package/dist/components/shell/NavDrawer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    class?: string;
+    onClose?: () => void;
+    children?: Snippet;
+};
+declare const NavDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type NavDrawer = ReturnType<typeof NavDrawer>;
+export default NavDrawer;

package/dist/components/shell/NavRow.svelte

@@ -0,0 +1,128 @@
+<!-- Figma: Nav Row (component set 39:3, node 39:3). -->
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+	export const navRowVariants = tv({
+		base: 'group/nav-row flex h-8 w-full min-w-0 items-center gap-2 rounded-lg py-1.5 ps-2 pe-2 text-start transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]',
+		variants: {
+			active: {
+				true: 'bg-sidebar-accent text-sidebar-accent-foreground text-body-medium',
+				false: 'text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+			}
+		},
+		defaultVariants: {
+			active: false
+		}
+	});
+
+	export type NavRowVisualState = 'default' | 'hover' | 'active' | 'focus' | 'disabled';
+
+	export type NavRowProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			ref?: HTMLAnchorElement | HTMLButtonElement | null;
+			class?: string;
+			label: string;
+			href?: string;
+			active?: boolean;
+			disabled?: boolean;
+			showIcon?: boolean;
+			showTrailing?: boolean;
+			trailing?: string;
+			/** Showcase-only forced visual state (CSS `:hover` / `:focus-visible` otherwise). */
+			visualState?: NavRowVisualState;
+		};
+</script>
+
+<script lang="ts">
+	import type { Icon } from '@tabler/icons-svelte';
+	import type { Snippet } from 'svelte';
+	import { cn, tv } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		label,
+		href = undefined,
+		active = false,
+		disabled = false,
+		showIcon = true,
+		showTrailing = false,
+		trailing = '',
+		visualState = undefined,
+		icon,
+		iconComponent = undefined,
+		children,
+		...restProps
+	}: NavRowProps & {
+		icon?: Snippet;
+		/** Tabler icon component (alternative to the `icon` snippet). */
+		iconComponent?: Icon;
+		children?: Snippet;
+	} = $props();
+
+	const hasIcon = $derived(showIcon && (Boolean(icon) || Boolean(iconComponent)));
+
+	const isActive = $derived(active || visualState === 'active');
+	const isDisabled = $derived(disabled || visualState === 'disabled');
+
+	const showcaseClass = $derived.by(() => {
+		if (!visualState || visualState === 'default' || visualState === 'active') return '';
+		if (visualState === 'hover') return 'bg-sidebar-accent text-sidebar-accent-foreground';
+		if (visualState === 'focus')
+			return 'ring-2 ring-sidebar-ring ring-offset-2 ring-offset-sidebar';
+		return '';
+	});
+</script>
+
+{#if href && !isDisabled}
+	<a
+		bind:this={ref}
+		{href}
+		class={cn(navRowVariants({ active: isActive }), showcaseClass, className)}
+		aria-current={isActive ? 'page' : undefined}
+		aria-disabled={isDisabled ? true : undefined}
+		{...restProps}
+	>
+		{#if hasIcon}
+			<span class="flex shrink-0 items-center justify-center text-current" aria-hidden="true">
+				{#if icon}
+					{@render icon()}
+				{:else if iconComponent}
+					{@const IconComp = iconComponent}
+					<IconComp />
+				{/if}
+			</span>
+		{/if}
+		<span class="min-w-0 flex-1 truncate">{label}</span>
+		{#if showTrailing && trailing}
+			<span class="text-caption text-muted-foreground shrink-0 tabular-nums">{trailing}</span>
+		{/if}
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		type="button"
+		class={cn(navRowVariants({ active: isActive }), showcaseClass, className)}
+		disabled={isDisabled}
+		aria-current={isActive ? 'page' : undefined}
+		{...restProps}
+	>
+		{#if hasIcon}
+			<span class="flex shrink-0 items-center justify-center text-current" aria-hidden="true">
+				{#if icon}
+					{@render icon()}
+				{:else if iconComponent}
+					{@const IconComp = iconComponent}
+					<IconComp />
+				{/if}
+			</span>
+		{/if}
+		<span class="min-w-0 flex-1 truncate">{label}</span>
+		{#if showTrailing && trailing}
+			<span class="text-caption text-muted-foreground shrink-0 tabular-nums">{trailing}</span>
+		{/if}
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/shell/NavRow.svelte.d.ts

@@ -0,0 +1,65 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export declare const navRowVariants: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "group/nav-row flex h-8 w-full min-w-0 items-center gap-2 rounded-lg py-1.5 ps-2 pe-2 text-start transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        active?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
+    };
+}, {
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "group/nav-row flex h-8 w-full min-w-0 items-center gap-2 rounded-lg py-1.5 ps-2 pe-2 text-start transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", import("tailwind-variants/dist/config.js").TVConfig<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, {
+    active: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type NavRowVisualState = 'default' | 'hover' | 'active' | 'focus' | 'disabled';
+export type NavRowProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    ref?: HTMLAnchorElement | HTMLButtonElement | null;
+    class?: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showTrailing?: boolean;
+    trailing?: string;
+    /** Showcase-only forced visual state (CSS `:hover` / `:focus-visible` otherwise). */
+    visualState?: NavRowVisualState;
+};
+import type { Icon } from '@tabler/icons-svelte';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = NavRowProps & {
+    icon?: Snippet;
+    /** Tabler icon component (alternative to the `icon` snippet). */
+    iconComponent?: Icon;
+    children?: Snippet;
+};
+declare const NavRow: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type NavRow = ReturnType<typeof NavRow>;
+export default NavRow;

package/dist/components/shell/NavSectionLabel.svelte

@@ -0,0 +1,27 @@
+<!-- Figma: Nav Section Label (component set 39:29, node 39:29). -->
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils.js';
+
+	let {
+		class: className,
+		label,
+		showTrailing = false,
+		trailing = '',
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		label: string;
+		showTrailing?: boolean;
+		trailing?: string;
+	} = $props();
+</script>
+
+<div
+	class={cn('flex h-8 w-full min-w-0 items-center gap-2 py-1 ps-3 pe-2 pb-1 text-start', className)}
+	{...restProps}
+>
+	<span class="text-caption-medium text-muted-foreground min-w-0 flex-1 truncate">{label}</span>
+	{#if showTrailing && trailing}
+		<span class="text-caption text-muted-foreground shrink-0 tabular-nums">{trailing}</span>
+	{/if}
+</div>

package/dist/components/shell/NavSectionLabel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    label: string;
+    showTrailing?: boolean;
+    trailing?: string;
+};
+declare const NavSectionLabel: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavSectionLabel = ReturnType<typeof NavSectionLabel>;
+export default NavSectionLabel;

package/dist/components/shell/NotificationRow.svelte

@@ -0,0 +1,76 @@
+<!--
+	Figma: Notification Row (component set 110:77, page Notification)
+-->
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	export type NotificationRowProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			ref?: HTMLButtonElement | HTMLAnchorElement | null;
+			class?: string;
+			title: string;
+			message: string;
+			time: string;
+			unread?: boolean;
+			icon: Snippet;
+			href?: string;
+		};
+</script>
+
+<script lang="ts">
+	import { cn } from '../../utils.js';
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		title,
+		message,
+		time,
+		unread = true,
+		icon,
+		href = undefined,
+		...restProps
+	}: NotificationRowProps = $props();
+
+	const rowClass = $derived(
+		cn(
+			'group flex w-full max-w-content items-center gap-4 rounded-xl px-4 py-3 text-start transition-colors duration-fast hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+			className
+		)
+	);
+
+	const titleClass = $derived(
+		unread ? 'text-body-medium text-foreground' : 'text-body text-foreground'
+	);
+</script>
+
+{#snippet rowInner()}
+	<span
+		class="bg-muted text-foreground duration-fast group-hover:bg-background flex size-10 shrink-0 items-center justify-center rounded-lg transition-colors"
+	>
+		{@render icon()}
+	</span>
+	<span class="min-w-0 flex-1">
+		<span class={cn('block truncate', titleClass)}>{title}</span>
+		<!-- A message of up to two lines, as in Figma: the one detail that matters is not cut to a single line -->
+		<span class="text-caption text-muted-foreground line-clamp-2">{message}</span>
+	</span>
+	<span class="flex shrink-0 items-center gap-2">
+		<span class="text-caption text-muted-foreground">{time}</span>
+		{#if unread}
+			<span class="bg-brand size-2 shrink-0 rounded-full" aria-hidden="true"></span>
+		{/if}
+	</span>
+{/snippet}
+
+{#if href}
+	<a bind:this={ref} {href} class={rowClass} {...restProps as HTMLAnchorAttributes}>
+		{@render rowInner()}
+	</a>
+{:else}
+	<button bind:this={ref} type="button" class={rowClass} {...restProps as HTMLButtonAttributes}>
+		{@render rowInner()}
+	</button>
+{/if}

package/dist/components/shell/NotificationRow.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export type NotificationRowProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+    class?: string;
+    title: string;
+    message: string;
+    time: string;
+    unread?: boolean;
+    icon: Snippet;
+    href?: string;
+};
+declare const NotificationRow: import("svelte").Component<NotificationRowProps, {}, "ref">;
+type NotificationRow = ReturnType<typeof NotificationRow>;
+export default NotificationRow;

package/dist/components/shell/PageHeader.svelte

@@ -0,0 +1,42 @@
+<!-- Figma: Page Header (component set 54:107, node 54:107). -->
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils.js';
+
+	let {
+		class: className,
+		title,
+		description = undefined,
+		showDescription = false,
+		/** When true, hides below the 1024px desktop breakpoint (title moves to Top Bar). */
+		hideBelowDesktop = true,
+		actions,
+		...restProps
+	}: HTMLAttributes<HTMLElement> & {
+		title: string;
+		description?: string;
+		showDescription?: boolean;
+		hideBelowDesktop?: boolean;
+		actions?: Snippet;
+	} = $props();
+</script>
+
+<header
+	class={cn(
+		'flex w-full flex-wrap items-center justify-between gap-4 ps-8 pe-8 pt-6 pb-4',
+		hideBelowDesktop && 'max-lg:hidden',
+		className
+	)}
+	{...restProps}
+>
+	<div class="flex min-w-0 flex-col gap-0.5">
+		<h1 class="text-heading-page text-foreground truncate">{title}</h1>
+		{#if showDescription && description}
+			<p class="text-body text-muted-foreground">{description}</p>
+		{/if}
+	</div>
+	{#if actions}
+		<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>
+	{/if}
+</header>

package/dist/components/shell/PageHeader.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    title: string;
+    description?: string;
+    showDescription?: boolean;
+    hideBelowDesktop?: boolean;
+    actions?: Snippet;
+};
+declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;