@widgetic/design-system 0.5.21 → 0.5.23

package/dist/components/shell/ProfileRow.svelte

@@ -0,0 +1,95 @@
+<!-- Figma: Profile Row (component set 53:3, node 53:3). -->
+<script lang="ts" module>
+	export const profileRowVariants = tv({
+		base: 'flex h-12 w-full min-w-0 items-center gap-2 rounded-lg p-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',
+		variants: {
+			interactive: {
+				true: 'cursor-pointer hover:bg-sidebar-accent',
+				false: ''
+			}
+		},
+		defaultVariants: {
+			interactive: true
+		}
+	});
+
+	export type ProfileRowVisualState = 'default' | 'hover' | 'focus';
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import IconSelector from '@tabler/icons-svelte/icons/selector';
+	import { cn, tv } from '../../utils.js';
+	import { Avatar } from '../ui/avatar/index.js';
+
+	let {
+		class: className,
+		title,
+		subtitle = '',
+		showSubtitle = false,
+		showTrailingIcon = true,
+		name = '',
+		src = undefined,
+		visualState = undefined,
+		menu,
+		onclick,
+		...restProps
+	}: HTMLAttributes<HTMLElement> & {
+		title: string;
+		subtitle?: string;
+		showSubtitle?: boolean;
+		showTrailingIcon?: boolean;
+		name?: string;
+		src?: string;
+		visualState?: ProfileRowVisualState;
+		menu?: Snippet;
+	} = $props();
+
+	const showcaseClass = $derived.by(() => {
+		if (!visualState || visualState === 'default') return '';
+		if (visualState === 'hover') return 'bg-sidebar-accent';
+		if (visualState === 'focus')
+			return 'ring-2 ring-sidebar-ring ring-offset-2 ring-offset-sidebar';
+		return '';
+	});
+
+	const asButton = $derived(Boolean(onclick || menu));
+</script>
+
+{#if asButton}
+	<button
+		type="button"
+		class={cn(profileRowVariants({ interactive: true }), showcaseClass, className)}
+		{onclick}
+		{...restProps}
+	>
+		<Avatar size="default" {name} {src} class="shrink-0" />
+		<span class="min-w-0 flex-1 flex-col gap-0 overflow-hidden">
+			<span class="text-body-medium text-foreground block truncate">{title}</span>
+			{#if showSubtitle && subtitle}
+				<span class="text-caption text-muted-foreground block truncate">{subtitle}</span>
+			{/if}
+		</span>
+		{#if showTrailingIcon}
+			<IconSelector class="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
+		{/if}
+		{@render menu?.()}
+	</button>
+{:else}
+	<div
+		class={cn(profileRowVariants({ interactive: false }), showcaseClass, className)}
+		{...restProps}
+	>
+		<Avatar size="default" {name} {src} class="shrink-0" />
+		<span class="min-w-0 flex-1 flex-col gap-0 overflow-hidden">
+			<span class="text-body-medium text-foreground block truncate">{title}</span>
+			{#if showSubtitle && subtitle}
+				<span class="text-caption text-muted-foreground block truncate">{subtitle}</span>
+			{/if}
+		</span>
+		{#if showTrailingIcon}
+			<IconSelector class="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,54 @@
+export declare const profileRowVariants: import("tailwind-variants").TVReturnType<{
+    interactive: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex h-12 w-full min-w-0 items-center gap-2 rounded-lg p-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", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        interactive?: 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")[];
+            }[];
+        };
+    };
+}, {
+    interactive: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    interactive: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex h-12 w-full min-w-0 items-center gap-2 rounded-lg p-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", import("tailwind-variants/dist/config.js").TVConfig<{
+    interactive: {
+        true: string;
+        false: string;
+    };
+}, {
+    interactive: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type ProfileRowVisualState = 'default' | 'hover' | 'focus';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    title: string;
+    subtitle?: string;
+    showSubtitle?: boolean;
+    showTrailingIcon?: boolean;
+    name?: string;
+    src?: string;
+    visualState?: ProfileRowVisualState;
+    menu?: Snippet;
+};
+declare const ProfileRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileRow = ReturnType<typeof ProfileRow>;
+export default ProfileRow;

package/dist/components/shell/SettingsDialog.svelte

@@ -0,0 +1,118 @@
+<!--
+	Figma: Settings Dialog (component set 107:618, page Settings Dialog)
+-->
+<script lang="ts" module>
+	export type SettingsDialogProps = {
+		open?: boolean;
+		class?: string;
+		title: string;
+		description?: string;
+		activeId: string;
+		groups: import('./settings-nav-types.js').SettingsNavGroup[];
+		onSelect?: (id: string) => void;
+		closeLabel?: string;
+		messages?: import('./messages.js').SettingsDialogMessages;
+		privacyHref?: string;
+		termsHref?: string;
+		cookieHref?: string;
+		children: import('svelte').Snippet;
+		descriptionSlot?: import('svelte').Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import IconX from '@tabler/icons-svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from '../ui/dialog/index.js';
+	import { cn } from '../../utils.js';
+	import SettingsNav from './SettingsNav.svelte';
+	import { defaultSettingsDialogMessages, type SettingsDialogMessages } from './messages.js';
+	import type { SettingsNavGroup } from './settings-nav-types.js';
+
+	let {
+		open = $bindable(false),
+		class: className,
+		title,
+		description = undefined,
+		activeId,
+		groups,
+		onSelect,
+		closeLabel = 'Close',
+		messages = defaultSettingsDialogMessages,
+		privacyHref = '#',
+		termsHref = '#',
+		cookieHref = '#',
+		children,
+		descriptionSlot
+	}: SettingsDialogProps = $props();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Portal>
+		<Dialog.Overlay class="bg-foreground/50 backdrop-blur-sm" />
+		<DialogPrimitive.Content
+			class={cn(
+				'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border bg-background duration-base fixed z-50 flex overflow-hidden border',
+				'inset-0 h-full max-h-none w-full rounded-none',
+				'lg:h-settings-modal lg:w-settings-modal lg:rounded-panel lg:start-1/2 lg:top-1/2 lg:max-h-[calc(100vh-2rem)] lg:max-w-[calc(100vw-2rem)] lg:-translate-x-1/2 lg:-translate-y-1/2',
+				className
+			)}
+			aria-describedby={description || descriptionSlot ? 'settings-dialog-description' : undefined}
+		>
+			<div class="flex min-h-0 min-w-0 flex-1 flex-col lg:flex-row">
+				<aside
+					class="border-border bg-sidebar flex w-full shrink-0 flex-col border-b p-3 lg:w-64 lg:border-e lg:border-b-0"
+				>
+					<SettingsNav {groups} {activeId} {onSelect} class="flex-1" />
+					<div class="mt-auto flex flex-col gap-1 px-2 pt-4 pb-1">
+						<a
+							href={privacyHref}
+							class="text-caption text-muted-foreground duration-fast hover:text-foreground w-fit transition-colors"
+							>{messages.privacyPolicy}</a
+						>
+						<a
+							href={termsHref}
+							class="text-caption text-muted-foreground duration-fast hover:text-foreground w-fit transition-colors"
+							>{messages.termsOfService}</a
+						>
+						<a
+							href={cookieHref}
+							class="text-caption text-muted-foreground duration-fast hover:text-foreground w-fit transition-colors"
+							>{messages.cookieSettings}</a
+						>
+					</div>
+				</aside>
+				<div class="flex min-h-0 min-w-0 flex-1 flex-col gap-6 overflow-y-auto p-8">
+					<header class="flex flex-col gap-1 pe-10">
+						<DialogPrimitive.Title class="text-heading-page text-foreground"
+							>{title}</DialogPrimitive.Title
+						>
+						{#if descriptionSlot}
+							<DialogPrimitive.Description
+								id="settings-dialog-description"
+								class="text-body text-muted-foreground"
+							>
+								{@render descriptionSlot()}
+							</DialogPrimitive.Description>
+						{:else if description}
+							<DialogPrimitive.Description
+								id="settings-dialog-description"
+								class="text-body text-muted-foreground"
+							>
+								{description}
+							</DialogPrimitive.Description>
+						{/if}
+					</header>
+					<div class="flex min-h-0 flex-1 flex-col gap-6">{@render children()}</div>
+				</div>
+			</div>
+			<DialogPrimitive.Close
+				class="text-foreground hover:bg-accent duration-fast focus-visible:ring-ring focus-visible:ring-offset-background absolute end-4 top-4 inline-flex size-8 items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+			>
+				<IconX class="size-4 stroke-[1.333]" aria-hidden="true" />
+				<span class="sr-only">{closeLabel}</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</Dialog.Portal>
+</Dialog.Root>

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

@@ -0,0 +1,19 @@
+export type SettingsDialogProps = {
+    open?: boolean;
+    class?: string;
+    title: string;
+    description?: string;
+    activeId: string;
+    groups: import('./settings-nav-types.js').SettingsNavGroup[];
+    onSelect?: (id: string) => void;
+    closeLabel?: string;
+    messages?: import('./messages.js').SettingsDialogMessages;
+    privacyHref?: string;
+    termsHref?: string;
+    cookieHref?: string;
+    children: import('svelte').Snippet;
+    descriptionSlot?: import('svelte').Snippet;
+};
+declare const SettingsDialog: import("svelte").Component<SettingsDialogProps, {}, "open">;
+type SettingsDialog = ReturnType<typeof SettingsDialog>;
+export default SettingsDialog;

package/dist/components/shell/SettingsNav.svelte

@@ -0,0 +1,46 @@
+<!--
+	Figma: Settings Nav (component set 106:467, page Settings Dialog)
+-->
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { SettingsNavGroup } from './settings-nav-types.js';
+
+	export type SettingsNavProps = HTMLAttributes<HTMLElement> & {
+		class?: string;
+		groups: SettingsNavGroup[];
+		activeId: string;
+		onSelect?: (id: string) => void;
+	};
+</script>
+
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import NavRow from './NavRow.svelte';
+	import NavSectionLabel from './NavSectionLabel.svelte';
+	import { settingsNavItemIsActive } from './settings-nav-types.js';
+
+	let { class: className, groups, activeId, onSelect, ...restProps }: SettingsNavProps = $props();
+</script>
+
+<nav class={cn('flex w-full flex-col gap-0.5', className)} aria-label="Settings" {...restProps}>
+	{#each groups as group (group.id)}
+		<div class="flex flex-col gap-0.5">
+			<NavSectionLabel label={group.label} />
+			{#each group.items as item (item.id)}
+				{@const active = settingsNavItemIsActive(activeId, item.id)}
+				<NavRow
+					label={item.label}
+					{active}
+					showIcon={Boolean(item.icon)}
+					onclick={() => onSelect?.(item.id)}
+				>
+					{#snippet icon()}
+						{#if item.icon}
+							{@render item.icon()}
+						{/if}
+					{/snippet}
+				</NavRow>
+			{/each}
+		</div>
+	{/each}
+</nav>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SettingsNavGroup } from './settings-nav-types.js';
+export type SettingsNavProps = HTMLAttributes<HTMLElement> & {
+    class?: string;
+    groups: SettingsNavGroup[];
+    activeId: string;
+    onSelect?: (id: string) => void;
+};
+declare const SettingsNav: import("svelte").Component<SettingsNavProps, {}, "">;
+type SettingsNav = ReturnType<typeof SettingsNav>;
+export default SettingsNav;

package/dist/components/shell/Sidebar.svelte

@@ -0,0 +1,82 @@
+<!-- Figma: Sidebar (component set 53:33, node 53:33). -->
+<script lang="ts">
+	import type { Icon } from '@tabler/icons-svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils.js';
+	import NavRow from './NavRow.svelte';
+
+	export type SidebarNavItem = {
+		id: string;
+		label: string;
+		/** Custom icon markup (advanced). */
+		icon?: Snippet;
+		/** Tabler icon component (preferred for standard nav icons). */
+		iconComponent?: Icon;
+		href?: string;
+		count?: string | number;
+		disabled?: boolean;
+	};
+
+	let {
+		class: className,
+		activeId = undefined,
+		items = undefined,
+		onNavigate,
+		header,
+		nav,
+		footer,
+		...restProps
+	}: HTMLAttributes<HTMLElement> & {
+		activeId?: string;
+		items?: SidebarNavItem[];
+		onNavigate?: (id: string) => void;
+		header?: Snippet;
+		nav?: Snippet;
+		footer?: Snippet;
+	} = $props();
+
+	function handleItemClick(id: string, href?: string) {
+		if (href) return;
+		onNavigate?.(id);
+	}
+</script>
+
+<aside
+	class={cn(
+		'w-sidebar bg-sidebar text-sidebar-foreground flex h-full shrink-0 flex-col gap-0.5 p-3',
+		className
+	)}
+	{...restProps}
+>
+	{#if header}
+		<div class="mb-0 shrink-0">{@render header()}</div>
+	{/if}
+
+	{#if items?.length}
+		<nav class="flex min-h-0 flex-1 flex-col gap-0.5" aria-label="Main">
+			{#each items as item (item.id)}
+				<NavRow
+					label={item.label}
+					href={item.href}
+					active={activeId === item.id}
+					disabled={item.disabled}
+					showIcon={Boolean(item.icon) || Boolean(item.iconComponent)}
+					showTrailing={item.count !== undefined && item.count !== null && item.count !== ''}
+					trailing={item.count != null ? String(item.count) : ''}
+					icon={item.icon}
+					iconComponent={item.iconComponent}
+					onclick={item.href ? undefined : () => handleItemClick(item.id, item.href)}
+				/>
+			{/each}
+		</nav>
+	{:else if nav}
+		<nav class="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto" aria-label="Main">
+			{@render nav()}
+		</nav>
+	{/if}
+
+	{#if footer}
+		<div class="mt-auto shrink-0 pt-2">{@render footer()}</div>
+	{/if}
+</aside>

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

@@ -0,0 +1,25 @@
+import type { Icon } from '@tabler/icons-svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export type SidebarNavItem = {
+    id: string;
+    label: string;
+    /** Custom icon markup (advanced). */
+    icon?: Snippet;
+    /** Tabler icon component (preferred for standard nav icons). */
+    iconComponent?: Icon;
+    href?: string;
+    count?: string | number;
+    disabled?: boolean;
+};
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    activeId?: string;
+    items?: SidebarNavItem[];
+    onNavigate?: (id: string) => void;
+    header?: Snippet;
+    nav?: Snippet;
+    footer?: Snippet;
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/shell/Stat.svelte

@@ -0,0 +1,63 @@
+<!--
+	Figma: Stat (component set 327:243, page Experiments)
+-->
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { type StatTone, statHintClass } from './stat-tone.js';
+
+	export const statVariants = tv({
+		base: 'flex flex-col gap-0.5 rounded-xl border border-border bg-background p-4',
+		variants: {
+			tone: {
+				default: '',
+				positive: '',
+				negative: ''
+			}
+		},
+		defaultVariants: {
+			tone: 'default'
+		}
+	});
+
+	export type StatProps = HTMLAttributes<HTMLDivElement> & {
+		class?: string;
+		label: string;
+		value: string;
+		hint?: string;
+		delta?: string;
+		tone?: StatTone;
+		trendIcon?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { cn, tv } from '../../utils.js';
+
+	let {
+		class: className,
+		label,
+		value,
+		hint = undefined,
+		delta = undefined,
+		tone = 'default',
+		trendIcon,
+		...restProps
+	}: StatProps = $props();
+
+	const hintLine = $derived(delta ?? hint);
+	const hintClass = $derived(statHintClass(tone));
+</script>
+
+<div class={cn(statVariants({ tone }), className)} {...restProps}>
+	<p class="text-caption-medium text-muted-foreground">{label}</p>
+	<p class="text-heading-page text-foreground">{value}</p>
+	{#if hintLine}
+		<p class={cn('text-caption flex items-center gap-1', hintClass)}>
+			{#if trendIcon}
+				<span class="inline-flex shrink-0 items-center">{@render trendIcon()}</span>
+			{/if}
+			<span>{hintLine}</span>
+		</p>
+	{/if}
+</div>

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

@@ -0,0 +1,58 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import { type StatTone } from './stat-tone.js';
+export declare const statVariants: import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: string;
+        positive: string;
+        negative: string;
+    };
+}, undefined, "flex flex-col gap-0.5 rounded-xl border border-border bg-background p-4", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        tone?: 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")[];
+            }[];
+        };
+    };
+}, {
+    tone: {
+        default: string;
+        positive: string;
+        negative: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: string;
+        positive: string;
+        negative: string;
+    };
+}, undefined, "flex flex-col gap-0.5 rounded-xl border border-border bg-background p-4", import("tailwind-variants/dist/config.js").TVConfig<{
+    tone: {
+        default: string;
+        positive: string;
+        negative: string;
+    };
+}, {
+    tone: {
+        default: string;
+        positive: string;
+        negative: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type StatProps = HTMLAttributes<HTMLDivElement> & {
+    class?: string;
+    label: string;
+    value: string;
+    hint?: string;
+    delta?: string;
+    tone?: StatTone;
+    trendIcon?: Snippet;
+};
+declare const Stat: import("svelte").Component<StatProps, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/components/shell/TopBar.svelte

@@ -0,0 +1,37 @@
+<!-- Figma: Top Bar (component set 142:2, node 142:2). -->
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import IconMenu2 from '@tabler/icons-svelte/icons/menu-2';
+	import { cn } from '../../utils.js';
+	import { IconButton } from '../ui/icon-button/index.js';
+
+	let {
+		class: className,
+		title,
+		menuLabel = 'Open navigation',
+		onMenuClick,
+		action,
+		...restProps
+	}: HTMLAttributes<HTMLElement> & {
+		title: string;
+		menuLabel?: string;
+		onMenuClick?: () => void;
+		action?: Snippet;
+	} = $props();
+</script>
+
+<header
+	class={cn('bg-sidebar flex h-14 w-full shrink-0 items-center gap-2 px-3 lg:hidden', className)}
+	{...restProps}
+>
+	<IconButton variant="ghost" label={menuLabel} onclick={onMenuClick}>
+		<IconMenu2 />
+	</IconButton>
+	<h1 class="text-heading-section text-foreground min-w-0 flex-1 truncate">{title}</h1>
+	{#if action}
+		<div class="shrink-0">{@render action()}</div>
+	{:else}
+		<span class="size-8 shrink-0" aria-hidden="true"></span>
+	{/if}
+</header>

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = HTMLAttributes<HTMLElement> & {
+    title: string;
+    menuLabel?: string;
+    onMenuClick?: () => void;
+    action?: Snippet;
+};
+declare const TopBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type TopBar = ReturnType<typeof TopBar>;
+export default TopBar;