@widgetic/design-system 0.5.21 → 0.5.23

package/dist/components/shell/WidgetRow.svelte

@@ -0,0 +1,126 @@
+<!-- Figma: Widget Row (component set 54:5, node 54:5). -->
+<script lang="ts" module>
+	import type { VariantProps } from 'tailwind-variants';
+
+	export const widgetRowVariants = tv({
+		base: 'group/widget-row flex min-h-16 w-full max-w-content items-center gap-4 rounded-xl py-3 ps-4 pe-4 transition-colors duration-fast focus-within:outline-hidden',
+		variants: {
+			selected: {
+				true: 'bg-brand-subtle ring-2 ring-brand',
+				false:
+					'hover:bg-accent focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background'
+			},
+			loading: {
+				true: 'pointer-events-none',
+				false: ''
+			}
+		},
+		defaultVariants: {
+			selected: false,
+			loading: false
+		}
+	});
+
+	export type WidgetRowVisualState = 'default' | 'hover' | 'focus' | 'selected' | 'loading';
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn, tv } from '../../utils.js';
+	import { Badge } from '../ui/badge/index.js';
+	import { Skeleton } from '../ui/skeleton/index.js';
+
+	let {
+		class: className,
+		title,
+		meta = '',
+		showBadge = true,
+		badgeLabel = 'Published',
+		selected = false,
+		loading = false,
+		visualState = undefined,
+		actionsAlwaysVisible = false,
+		thumbnail,
+		actions,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		title: string;
+		meta?: string;
+		showBadge?: boolean;
+		badgeLabel?: string;
+		selected?: boolean;
+		loading?: boolean;
+		visualState?: WidgetRowVisualState;
+		/** Touch / mobile: keep row actions visible without hover. */
+		actionsAlwaysVisible?: boolean;
+		thumbnail?: Snippet;
+		actions?: Snippet;
+	} = $props();
+
+	const isLoading = $derived(loading || visualState === 'loading');
+	const isSelected = $derived(selected || visualState === 'selected');
+	const forceHover = $derived(visualState === 'hover');
+	const forceFocus = $derived(visualState === 'focus');
+</script>
+
+{#if isLoading}
+	<div
+		class={cn(
+			'max-w-content flex min-h-16 w-full items-center gap-4 rounded-xl py-3 ps-4 pe-4',
+			className
+		)}
+		role="status"
+		aria-busy="true"
+	>
+		<Skeleton class="size-10 shrink-0 rounded-lg" />
+		<div class="flex min-w-0 flex-1 flex-col gap-2">
+			<Skeleton class="h-5 w-3/5 max-w-xs" />
+			<Skeleton class="h-4 w-2/5 max-w-[12rem]" />
+		</div>
+		<Skeleton class="h-5 w-20 rounded-full" />
+	</div>
+{:else}
+	<div
+		class={cn(
+			widgetRowVariants({ selected: isSelected }),
+			forceHover && !isSelected && 'bg-accent',
+			forceFocus && !isSelected && 'ring-ring ring-offset-background ring-2 ring-offset-2',
+			className
+		)}
+		{...restProps}
+	>
+		<div
+			class={cn(
+				'bg-muted duration-fast group-hover/widget-row:bg-background flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg transition-colors',
+				forceHover && 'bg-background'
+			)}
+		>
+			{#if thumbnail}
+				{@render thumbnail()}
+			{/if}
+		</div>
+
+		<div class="min-w-0 flex-1 flex-col gap-0 overflow-hidden">
+			<span class="text-body-medium text-foreground block truncate">{title}</span>
+			{#if meta}
+				<span class="text-caption text-muted-foreground block truncate">{meta}</span>
+			{/if}
+		</div>
+
+		{#if showBadge}
+			<Badge variant="secondary" showDot class="shrink-0 max-sm:hidden">{badgeLabel}</Badge>
+		{/if}
+
+		{#if actions}
+			<div
+				class={cn(
+					'duration-fast shrink-0 opacity-0 transition-opacity group-focus-within/widget-row:opacity-100 group-hover/widget-row:opacity-100',
+					(actionsAlwaysVisible || forceHover || forceFocus) && 'opacity-100'
+				)}
+			>
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,78 @@
+export declare const widgetRowVariants: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}, undefined, "group/widget-row flex min-h-16 w-full max-w-content items-center gap-4 rounded-xl py-3 ps-4 pe-4 transition-colors duration-fast focus-within:outline-hidden", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        selected?: boolean | (string | number | symbol)[] | undefined;
+        loading?: 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")[];
+            }[];
+        };
+    };
+}, {
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}, undefined, "group/widget-row flex min-h-16 w-full max-w-content items-center gap-4 rounded-xl py-3 ps-4 pe-4 transition-colors duration-fast focus-within:outline-hidden", import("tailwind-variants/dist/config.js").TVConfig<{
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}, {
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type WidgetRowVisualState = 'default' | 'hover' | 'focus' | 'selected' | 'loading';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    meta?: string;
+    showBadge?: boolean;
+    badgeLabel?: string;
+    selected?: boolean;
+    loading?: boolean;
+    visualState?: WidgetRowVisualState;
+    /** Touch / mobile: keep row actions visible without hover. */
+    actionsAlwaysVisible?: boolean;
+    thumbnail?: Snippet;
+    actions?: Snippet;
+};
+declare const WidgetRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type WidgetRow = ReturnType<typeof WidgetRow>;
+export default WidgetRow;

package/dist/components/shell/error-state-messages.d.ts

@@ -0,0 +1,7 @@
+export interface ErrorStateMessages {
+    title: string;
+    description: string;
+    retryLabel: string;
+    supportLabel: string;
+}
+export declare const defaultErrorStateMessages: ErrorStateMessages;

package/dist/components/shell/error-state-messages.js

@@ -0,0 +1,9 @@
+// The words of the Figma Error State: the title says what failed in a few words, the description gives the likely cause
+// and what to try. "Something went wrong" stays only for a failure whose cause is not known, and a page gives that as
+// its own `messages`.
+export const defaultErrorStateMessages = {
+    title: 'We could not load your widgets',
+    description: 'Check your connection and try again.',
+    retryLabel: 'Try again',
+    supportLabel: 'Contact support'
+};

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

@@ -0,0 +1,22 @@
+export { default as NavRow, navRowVariants } from './NavRow.svelte';
+export { default as NavSectionLabel } from './NavSectionLabel.svelte';
+export { default as ProfileRow, profileRowVariants } from './ProfileRow.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export type { SidebarNavItem } from './Sidebar.svelte';
+export { default as WidgetRow, widgetRowVariants } from './WidgetRow.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as TopBar } from './TopBar.svelte';
+export { default as NavDrawer } from './NavDrawer.svelte';
+export { default as AppShell } from './AppShell.svelte';
+export { default as ErrorState } from './ErrorState.svelte';
+export { defaultErrorStateMessages, type ErrorStateMessages } from './error-state-messages.js';
+export { default as NotificationRow, type NotificationRowProps } from './NotificationRow.svelte';
+export { default as SettingsNav, type SettingsNavProps } from './SettingsNav.svelte';
+export { default as SettingsDialog, type SettingsDialogProps } from './SettingsDialog.svelte';
+export { default as Stat, type StatProps, statVariants } from './Stat.svelte';
+export { default as Banner, type BannerProps, type BannerTone, bannerVariants } from './Banner.svelte';
+export { default as Link, type LinkProps, type LinkSize, linkVariants } from './Link.svelte';
+export { type SettingsNavGroup, type SettingsNavItem, settingsNavItemIsActive } from './settings-nav-types.js';
+export { externalLinkAttributes } from './link-external.js';
+export { statHintClass, type StatTone } from './stat-tone.js';
+export { type SettingsDialogMessages, defaultSettingsDialogMessages } from './messages.js';

package/dist/components/shell/index.js

@@ -0,0 +1,25 @@
+// Shell components (app shell, navigation, status, settings) built from the Figma design system.
+// Each component is exported here by the agent that owns src/lib/components/shell.
+// [S1 exports]
+export { default as NavRow, navRowVariants } from './NavRow.svelte';
+export { default as NavSectionLabel } from './NavSectionLabel.svelte';
+export { default as ProfileRow, profileRowVariants } from './ProfileRow.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as WidgetRow, widgetRowVariants } from './WidgetRow.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as TopBar } from './TopBar.svelte';
+export { default as NavDrawer } from './NavDrawer.svelte';
+export { default as AppShell } from './AppShell.svelte';
+export { default as ErrorState } from './ErrorState.svelte';
+export { defaultErrorStateMessages } from './error-state-messages.js';
+// [S2 exports]
+export { default as NotificationRow } from './NotificationRow.svelte';
+export { default as SettingsNav } from './SettingsNav.svelte';
+export { default as SettingsDialog } from './SettingsDialog.svelte';
+export { default as Stat, statVariants } from './Stat.svelte';
+export { default as Banner, bannerVariants } from './Banner.svelte';
+export { default as Link, linkVariants } from './Link.svelte';
+export { settingsNavItemIsActive } from './settings-nav-types.js';
+export { externalLinkAttributes } from './link-external.js';
+export { statHintClass } from './stat-tone.js';
+export { defaultSettingsDialogMessages } from './messages.js';

package/dist/components/shell/link-external.d.ts

@@ -0,0 +1,2 @@
+/** rel/target for links that open in a new tab. */
+export declare function externalLinkAttributes(): Pick<HTMLAnchorElement, 'rel' | 'target'>;

package/dist/components/shell/link-external.js

@@ -0,0 +1,7 @@
+/** rel/target for links that open in a new tab. */
+export function externalLinkAttributes() {
+    return {
+        rel: 'noopener noreferrer',
+        target: '_blank'
+    };
+}

package/dist/components/shell/messages.d.ts

@@ -0,0 +1,7 @@
+/** Footer links in SettingsDialog (Figma Settings Dialog 107:618). */
+export interface SettingsDialogMessages {
+    privacyPolicy: string;
+    termsOfService: string;
+    cookieSettings: string;
+}
+export declare const defaultSettingsDialogMessages: SettingsDialogMessages;

package/dist/components/shell/messages.js

@@ -0,0 +1,5 @@
+export const defaultSettingsDialogMessages = {
+    privacyPolicy: 'Privacy policy',
+    termsOfService: 'Terms of service',
+    cookieSettings: 'Cookie settings'
+};

package/dist/components/shell/settings-nav-types.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+export type SettingsNavItem = {
+    id: string;
+    label: string;
+    icon?: Snippet;
+};
+export type SettingsNavGroup = {
+    id: string;
+    label: string;
+    items: SettingsNavItem[];
+};
+export declare function settingsNavItemIsActive(activeId: string, itemId: string): boolean;

package/dist/components/shell/settings-nav-types.js

@@ -0,0 +1,3 @@
+export function settingsNavItemIsActive(activeId, itemId) {
+    return activeId === itemId;
+}

package/dist/components/shell/shell-utils.d.ts

@@ -0,0 +1,7 @@
+/** Drawer motion from Figma Responsive / appShell ledger (ms). */
+export declare function navDrawerTransitionMs(open: boolean): number;
+export declare function navDrawerTransitionEasing(open: boolean): 'var(--ease-drawer)' | 'var(--ease-out)';
+export declare function navDrawerEffectiveTransitionMs(open: boolean, reducedMotion: boolean): number;
+export declare function getFocusableElements(root: HTMLElement): HTMLElement[];
+/** Returns the next element to focus when Tab / Shift+Tab is pressed inside `root`. */
+export declare function navDrawerTabTarget(root: HTMLElement, active: HTMLElement, shiftKey: boolean): HTMLElement | null;

package/dist/components/shell/shell-utils.js

@@ -0,0 +1,27 @@
+/** Drawer motion from Figma Responsive / appShell ledger (ms). */
+export function navDrawerTransitionMs(open) {
+    return open ? 320 : 220;
+}
+export function navDrawerTransitionEasing(open) {
+    return open ? 'var(--ease-drawer)' : 'var(--ease-out)';
+}
+export function navDrawerEffectiveTransitionMs(open, reducedMotion) {
+    return reducedMotion ? 0 : navDrawerTransitionMs(open);
+}
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+export function getFocusableElements(root) {
+    return [...root.querySelectorAll(FOCUSABLE)].filter((el) => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true');
+}
+/** Returns the next element to focus when Tab / Shift+Tab is pressed inside `root`. */
+export function navDrawerTabTarget(root, active, shiftKey) {
+    const focusables = getFocusableElements(root);
+    if (focusables.length === 0)
+        return null;
+    const index = focusables.indexOf(active);
+    if (index === -1)
+        return focusables[0] ?? null;
+    if (shiftKey) {
+        return index === 0 ? focusables[focusables.length - 1] : focusables[index - 1];
+    }
+    return index === focusables.length - 1 ? focusables[0] : focusables[index + 1];
+}

package/dist/components/shell/stat-tone.d.ts

@@ -0,0 +1,3 @@
+export type StatTone = 'default' | 'positive' | 'negative';
+/** Hint line colour for Stat tones (Figma Stat 327:243). */
+export declare function statHintClass(tone: StatTone): string;

package/dist/components/shell/stat-tone.js

@@ -0,0 +1,11 @@
+/** Hint line colour for Stat tones (Figma Stat 327:243). */
+export function statHintClass(tone) {
+    switch (tone) {
+        case 'positive':
+            return 'text-brand-foreground';
+        case 'negative':
+            return 'text-destructive';
+        default:
+            return 'text-muted-foreground';
+    }
+}