@svadmin/ui 0.42.3 → 0.44.0

package/dist/components/content/MemberList.svelte.d.ts

@@ -0,0 +1,17 @@
+export interface MemberSummary {
+    id: string;
+    name: string;
+    email?: string;
+    role?: string;
+    department?: string;
+    status?: 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    avatar?: string;
+}
+interface Props {
+    members?: MemberSummary[];
+    onaction?: (member: MemberSummary) => void;
+    class?: string;
+}
+declare const MemberList: import("svelte").Component<Props, {}, "">;
+type MemberList = ReturnType<typeof MemberList>;
+export default MemberList;

package/dist/components/content/MetricBlock.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Skeleton } from '../ui/skeleton/index.js';
+  interface Props {
+    label: string;
+    value: string | number;
+    detail?: string;
+    trend?: string;
+    icon?: Snippet;
+    loading?: boolean;
+    class?: string;
+  }
+  let { label, value, detail, trend, icon, loading = false, class: className = '' }: Props = $props();
+</script>
+
+<div data-svadmin-metric-card class={'min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm ' + className}>
+  <div class="flex items-start justify-between gap-3">
+    <p class="text-sm text-muted-foreground">{label}</p>
+    {#if icon}<span class="text-muted-foreground">{@render icon()}</span>{/if}
+  </div>
+  {#if loading}
+    <Skeleton class="mt-3 h-8 w-24" />
+  {:else}
+    <p class="mt-2 truncate text-2xl font-semibold tracking-normal text-foreground">{value}</p>
+    {#if detail || trend}<div class="mt-2 flex flex-wrap gap-2 text-xs">{#if trend}<span class="font-medium text-success">{trend}</span>{/if}{#if detail}<span class="text-muted-foreground">{detail}</span>{/if}</div>{/if}
+  {/if}
+</div>

package/dist/components/content/MetricBlock.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label: string;
+    value: string | number;
+    detail?: string;
+    trend?: string;
+    icon?: Snippet;
+    loading?: boolean;
+    class?: string;
+}
+declare const MetricBlock: import("svelte").Component<Props, {}, "">;
+type MetricBlock = ReturnType<typeof MetricBlock>;
+export default MetricBlock;

package/dist/components/content/NetworkTable.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" generics="T extends object">
+  import type { Snippet } from 'svelte';
+  import * as Table from '../ui/table/index.js';
+  import type { NetworkColumn } from './NetworkTable.types.js';
+  interface Props { rows?: T[]; columns: NetworkColumn<T>[]; row?: Snippet<[T]>; class?: string; }
+  let { rows = [], columns, row, class: className = '' }: Props = $props();
+</script>
+<div class={'overflow-x-auto rounded-lg border border-border bg-card ' + className}>
+  <Table.Root data-svadmin-datatable>
+    <Table.Header data-svadmin-table-head><Table.Row>{#each columns as column (String(column.key))}<Table.Head>{column.label}</Table.Head>{/each}</Table.Row></Table.Header>
+    <Table.Body>
+      {#each rows as item, index (String('id' in item ? item.id : index))}
+        {#if row}{@render row(item)}{:else}<Table.Row data-svadmin-table-row>{#each columns as column (String(column.key))}<Table.Cell>{String(item[column.key] ?? '')}</Table.Cell>{/each}</Table.Row>{/if}
+      {/each}
+    </Table.Body>
+  </Table.Root>
+  {#if rows.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No records</div>{/if}
+</div>

package/dist/components/content/NetworkTable.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { NetworkColumn } from './NetworkTable.types.js';
+declare function $$render<T extends object>(): {
+    props: {
+        rows?: T[];
+        columns: NetworkColumn<T>[];
+        row?: Snippet<[T]>;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NetworkTable: $$IsomorphicComponent;
+type NetworkTable<T extends object> = InstanceType<typeof NetworkTable<T>>;
+export default NetworkTable;

package/dist/components/content/NetworkTable.types.d.ts

@@ -0,0 +1,4 @@
+export interface NetworkColumn<T extends object> {
+    key: keyof T;
+    label: string;
+}

package/dist/components/content/NetworkTable.types.js

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

package/dist/components/content/NetworkUserCard.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { MessageSquare, UserPlus } from '@lucide/svelte';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { Button } from '../ui/button/index.js';
+  import * as Card from '../ui/card/index.js';
+  export interface NetworkUser { id: string; name: string; handle?: string; role?: string; avatar?: string; summary?: string; }
+  interface Props { user: NetworkUser; onconnect?: () => void; onmessage?: () => void; class?: string; }
+  let { user, onconnect, onmessage, class: className = '' }: Props = $props();
+  const initials = $derived(user.name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase());
+</script>
+<Card.Card class={className}>
+  <Card.CardContent class="flex items-start gap-3 p-4">
+    <Avatar src={user.avatar} alt={user.name} fallback={initials} size="lg" />
+    <div class="min-w-0 flex-1"><h3 class="truncate text-sm font-semibold text-foreground">{user.name}</h3>{#if user.handle}<p class="truncate text-xs text-muted-foreground">{user.handle}</p>{/if}{#if user.role}<p class="mt-2 text-xs font-medium text-foreground">{user.role}</p>{/if}{#if user.summary}<p class="mt-1 line-clamp-2 text-xs text-muted-foreground">{user.summary}</p>{/if}</div>
+    <div class="flex shrink-0 gap-1">{#if onmessage}<Button variant="ghost" size="icon-sm" aria-label={'Message ' + user.name} onclick={onmessage}><MessageSquare class="size-4" /></Button>{/if}{#if onconnect}<Button variant="outline" size="icon-sm" aria-label={'Connect with ' + user.name} onclick={onconnect}><UserPlus class="size-4" /></Button>{/if}</div>
+  </Card.CardContent>
+</Card.Card>

package/dist/components/content/NetworkUserCard.svelte.d.ts

@@ -0,0 +1,17 @@
+export interface NetworkUser {
+    id: string;
+    name: string;
+    handle?: string;
+    role?: string;
+    avatar?: string;
+    summary?: string;
+}
+interface Props {
+    user: NetworkUser;
+    onconnect?: () => void;
+    onmessage?: () => void;
+    class?: string;
+}
+declare const NetworkUserCard: import("svelte").Component<Props, {}, "">;
+type NetworkUserCard = ReturnType<typeof NetworkUserCard>;
+export default NetworkUserCard;

package/dist/components/content/OtpInput.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Input } from '../ui/input/index.js';
+  interface Props { value?: string[]; length?: number; disabled?: boolean; 'aria-label'?: string; class?: string; }
+  let { value = $bindable<string[]>([]), length = 6, disabled = false, 'aria-label': ariaLabel = 'One-time password', class: className = '' }: Props = $props();
+  const slots = $derived(Array.from({ length }, (_, index) => index));
+  function updateDigit(event: Event, index: number) {
+    const input = event.currentTarget as HTMLInputElement;
+    const digit = input.value.replace(/\D/g, '').slice(-1);
+    const next = [...value];
+    next[index] = digit;
+    value = next;
+    if (digit && index < length - 1) {
+      const sibling = input.parentElement?.querySelectorAll('input')[index + 1] as HTMLInputElement | undefined;
+      sibling?.focus();
+    }
+  }
+</script>
+<div class={'flex justify-center gap-2 ' + className} role="group" aria-label={ariaLabel}>
+  {#each slots as index (index)}
+    <Input class="size-12 text-center text-lg font-semibold" value={value[index] ?? ''} maxlength={1} inputmode="numeric" pattern="[0-9]*" aria-label={ariaLabel + ' digit ' + (index + 1)} {disabled} oninput={(event) => updateDigit(event, index)} />
+  {/each}
+</div>

package/dist/components/content/OtpInput.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    value?: string[];
+    length?: number;
+    disabled?: boolean;
+    'aria-label'?: string;
+    class?: string;
+}
+declare const OtpInput: import("svelte").Component<Props, {}, "value">;
+type OtpInput = ReturnType<typeof OtpInput>;
+export default OtpInput;

package/dist/components/content/PageToolbar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props {
+    leading?: Snippet;
+    trailing?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+  let { leading, trailing, children, class: className = '' }: Props = $props();
+</script>
+
+<div data-svadmin-table-toolbar class={'flex flex-col gap-3 rounded-lg border border-border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between ' + className}>
+  <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+    {#if leading}{@render leading()}{/if}
+    {#if children}{@render children()}{/if}
+  </div>
+  {#if trailing}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render trailing()}</div>{/if}
+</div>

package/dist/components/content/PageToolbar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    leading?: Snippet;
+    trailing?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const PageToolbar: import("svelte").Component<Props, {}, "">;
+type PageToolbar = ReturnType<typeof PageToolbar>;
+export default PageToolbar;

package/dist/components/content/ProjectCard.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { ArrowRight, CheckCircle2, FolderKanban, Users } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import * as Card from '../ui/card/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import Progress from '../ui/progress/progress.svelte';
+  import StatusBadge from './StatusBadge.svelte';
+  export type ProjectStatus = 'active' | 'completed' | 'on-hold' | 'draft';
+  export interface ProjectSummary {
+    id: string;
+    name: string;
+    description?: string;
+    status: ProjectStatus;
+    members?: number;
+    tasks?: number;
+    progress?: number;
+    tags?: string[];
+    image?: string;
+  }
+  interface Props { project: ProjectSummary; onclick?: () => void; class?: string; }
+  let { project, onclick, class: className = '' }: Props = $props();
+  const progress = $derived(project.progress ?? (project.status === 'completed' ? 100 : project.status === 'active' ? 72 : 0));
+</script>
+<Card.Card data-interactive={onclick ? 'true' : undefined} class={'h-full ' + className}>
+  {#if project.image}<img src={project.image} alt={project.name} class="h-32 w-full object-cover" />{/if}
+  <Card.CardContent class="flex h-full flex-col gap-4 p-4">
+    <div class="flex items-start justify-between gap-3">
+      <div class="flex min-w-0 items-center gap-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted/50 text-muted-foreground"><FolderKanban class="size-4" /></span><h3 class="truncate text-sm font-semibold text-foreground">{project.name}</h3></div>
+      <StatusBadge status={project.status === 'active' ? 'success' : project.status === 'completed' ? 'info' : project.status === 'on-hold' ? 'warning' : 'neutral'} label={project.status} />
+    </div>
+    {#if project.description}<p class="line-clamp-2 text-sm text-muted-foreground">{project.description}</p>{/if}
+    {#if project.tags?.length}<div class="flex flex-wrap gap-1.5">{#each project.tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div>{/if}
+    <div class="mt-auto space-y-2">
+      <div class="flex items-center justify-between text-xs text-muted-foreground"><span>Progress</span><span class="font-medium text-foreground">{progress}%</span></div>
+      <Progress value={progress} class="h-1.5" />
+      <div class="flex items-center justify-between border-t border-border pt-3 text-xs text-muted-foreground"><span class="flex items-center gap-1"><Users class="size-3.5" />{project.members ?? 0}</span><span class="flex items-center gap-1"><CheckCircle2 class="size-3.5" />{project.tasks ?? 0}</span>{#if onclick}<Button variant="ghost" size="icon-sm" aria-label={project.name} onclick={onclick}><ArrowRight class="size-3.5" /></Button>{/if}</div>
+    </div>
+  </Card.CardContent>
+</Card.Card>

package/dist/components/content/ProjectCard.svelte.d.ts

@@ -0,0 +1,20 @@
+export type ProjectStatus = 'active' | 'completed' | 'on-hold' | 'draft';
+export interface ProjectSummary {
+    id: string;
+    name: string;
+    description?: string;
+    status: ProjectStatus;
+    members?: number;
+    tasks?: number;
+    progress?: number;
+    tags?: string[];
+    image?: string;
+}
+interface Props {
+    project: ProjectSummary;
+    onclick?: () => void;
+    class?: string;
+}
+declare const ProjectCard: import("svelte").Component<Props, {}, "">;
+type ProjectCard = ReturnType<typeof ProjectCard>;
+export default ProjectCard;

package/dist/components/content/SectionHeader.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    class?: string;
+  }
+  let { title, description, actions, class: className = '' }: Props = $props();
+</script>
+
+<div class={'flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between ' + className}>
+  <div class="min-w-0 space-y-1">
+    <h2 class="text-base font-semibold text-foreground">{title}</h2>
+    {#if description}<p class="text-sm text-muted-foreground">{description}</p>{/if}
+  </div>
+  {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+</div>

package/dist/components/content/SectionHeader.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    class?: string;
+}
+declare const SectionHeader: import("svelte").Component<Props, {}, "">;
+type SectionHeader = ReturnType<typeof SectionHeader>;
+export default SectionHeader;

package/dist/components/content/SecurityEventTable.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import * as Table from '../ui/table/index.js';
+  import StatusBadge from './StatusBadge.svelte';
+  export interface SecurityEvent { id: string; event: string; actor?: string; location?: string; createdAt: string; severity: 'info' | 'warning' | 'danger'; }
+  interface Props { events?: SecurityEvent[]; class?: string; }
+  let { events = [], class: className = '' }: Props = $props();
+</script>
+<div class={'overflow-x-auto rounded-lg border border-border bg-card ' + className}>
+  <Table.Root data-svadmin-datatable>
+    <Table.Header data-svadmin-table-head><Table.Row><Table.Head>Event</Table.Head><Table.Head>Actor</Table.Head><Table.Head>Location</Table.Head><Table.Head>Time</Table.Head><Table.Head>Risk</Table.Head></Table.Row></Table.Header>
+    <Table.Body>
+      {#each events as event (event.id)}
+        <Table.Row data-svadmin-table-row><Table.Cell class="font-medium">{event.event}</Table.Cell><Table.Cell>{event.actor ?? 'System'}</Table.Cell><Table.Cell>{event.location ?? 'Unknown'}</Table.Cell><Table.Cell class="whitespace-nowrap">{event.createdAt}</Table.Cell><Table.Cell><StatusBadge status={event.severity} label={event.severity} /></Table.Cell></Table.Row>
+      {/each}
+    </Table.Body>
+  </Table.Root>
+  {#if events.length === 0}<div class="p-6 text-center text-sm text-muted-foreground">No security events</div>{/if}
+</div>

package/dist/components/content/SecurityEventTable.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface SecurityEvent {
+    id: string;
+    event: string;
+    actor?: string;
+    location?: string;
+    createdAt: string;
+    severity: 'info' | 'warning' | 'danger';
+}
+interface Props {
+    events?: SecurityEvent[];
+    class?: string;
+}
+declare const SecurityEventTable: import("svelte").Component<Props, {}, "">;
+type SecurityEventTable = ReturnType<typeof SecurityEventTable>;
+export default SecurityEventTable;

package/dist/components/content/StatusBadge.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+  export type Status = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+  interface Props {
+    status: Status;
+    label?: string;
+    class?: string;
+  }
+  let { status, label = status, class: className = '' }: Props = $props();
+  const toneClass: Record<Status, string> = {
+    success: 'border-success/30 bg-success/10 text-success',
+    warning: 'border-warning/30 bg-warning/10 text-warning-foreground',
+    danger: 'border-destructive/30 bg-destructive/10 text-destructive',
+    info: 'border-primary/30 bg-primary/10 text-primary',
+    neutral: 'border-border bg-muted text-muted-foreground',
+  };
+</script>
+
+<Badge variant="outline" class={'font-medium ' + toneClass[status] + ' ' + className}>{label}</Badge>

package/dist/components/content/StatusBadge.svelte.d.ts

@@ -0,0 +1,9 @@
+export type Status = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+interface Props {
+    status: Status;
+    label?: string;
+    class?: string;
+}
+declare const StatusBadge: import("svelte").Component<Props, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
+export default StatusBadge;

package/dist/components/content/SystemErrorState.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { AlertTriangle, ArrowLeft, FileQuestion, Home } from '@lucide/svelte';
+  import { captureAdminContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import * as Card from '../ui/card/index.js';
+  interface Props { status?: '404' | '500'; title?: string; description?: string; action?: Snippet; }
+  let { status = '404', title, description, action }: Props = $props();
+  const adminContext = captureAdminContext();
+  const i18n = useTranslation();
+  const isNotFound = $derived(status === '404');
+  const resolvedTitle = $derived(title ?? (isNotFound ? i18n.t('common.pageNotFound') : i18n.t('common.error')));
+  const resolvedDescription = $derived(description ?? (isNotFound ? i18n.t('error.pageNotFoundDescription') : i18n.t('error.internalServerErrorDescription')));
+</script>
+<div class="flex min-h-[24rem] items-center justify-center p-4" data-svadmin-system-error>
+  <Card.Card class="w-full max-w-md"><Card.CardContent class="space-y-5 p-8 text-center"><div class="mx-auto flex size-14 items-center justify-center rounded-lg bg-muted text-muted-foreground">{#if isNotFound}<FileQuestion class="size-7" />{:else}<AlertTriangle class="size-7 text-destructive" />{/if}</div><div class="space-y-2"><p class="text-xs font-medium text-muted-foreground">{status}</p><h2 class="text-xl font-semibold text-foreground">{resolvedTitle}</h2><p class="text-sm leading-6 text-muted-foreground">{resolvedDescription}</p></div>{#if action}<div>{@render action()}</div>{/if}<div class="flex flex-wrap justify-center gap-2"><Button variant="outline" onclick={() => adminContext.back()}><ArrowLeft class="size-4" />{i18n.t('common.back')}</Button><Button onclick={() => adminContext.navigate('/')}><Home class="size-4" />{i18n.t('common.returnHome')}</Button></div></Card.CardContent></Card.Card>
+</div>

package/dist/components/content/SystemErrorState.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    status?: '404' | '500';
+    title?: string;
+    description?: string;
+    action?: Snippet;
+}
+declare const SystemErrorState: import("svelte").Component<Props, {}, "">;
+type SystemErrorState = ReturnType<typeof SystemErrorState>;
+export default SystemErrorState;

package/dist/components/content/TeamCard.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { ArrowRight, Users } from '@lucide/svelte';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { Button } from '../ui/button/index.js';
+  import * as Card from '../ui/card/index.js';
+  export interface TeamSummary {
+    id: string;
+    name: string;
+    description?: string;
+    totalMembers?: number;
+    members?: Array<{ id?: string; name: string; avatar?: string; role?: string }>;
+    color?: string;
+    rating?: number;
+  }
+  interface Props { team: TeamSummary; onjoin?: () => void; onclick?: () => void; class?: string; }
+  let { team, onjoin, onclick, class: className = '' }: Props = $props();
+  const initials = (name: string) => name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
+</script>
+<Card.Card data-interactive={onclick ? 'true' : undefined} class={'h-full ' + className}>
+  <Card.CardContent class="flex h-full flex-col gap-3 p-4">
+    <div class="flex items-start gap-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary" style:background-color={team.color ? `${team.color}20` : undefined}><Users class="size-4" style={team.color ? `color: ${team.color}` : undefined} /></span><div class="min-w-0 flex-1"><h3 class="truncate text-sm font-semibold text-foreground">{team.name}</h3><p class="text-xs text-muted-foreground">{team.totalMembers ?? team.members?.length ?? 0} members</p></div>{#if team.rating}<span class="text-xs font-semibold text-warning">{team.rating}</span>{/if}</div>
+    {#if team.description}<p class="line-clamp-2 text-sm text-muted-foreground">{team.description}</p>{/if}
+    <div class="flex items-center gap-1">{#each (team.members ?? []).slice(0, 5) as member, index (member.id ?? member.name + '-' + index)}<Avatar src={member.avatar} alt={member.name} fallback={initials(member.name)} size="sm" class="-mr-1 ring-2 ring-card" />{/each}</div>
+    <div class="mt-auto flex gap-2 border-t border-border pt-3">{#if onjoin}<Button variant="outline" size="sm" class="flex-1" onclick={onjoin}>Join</Button>{/if}{#if onclick}<Button variant="ghost" size="sm" class="flex-1" onclick={onclick}>View <ArrowRight class="size-3.5" /></Button>{/if}</div>
+  </Card.CardContent>
+</Card.Card>

package/dist/components/content/TeamCard.svelte.d.ts

@@ -0,0 +1,23 @@
+export interface TeamSummary {
+    id: string;
+    name: string;
+    description?: string;
+    totalMembers?: number;
+    members?: Array<{
+        id?: string;
+        name: string;
+        avatar?: string;
+        role?: string;
+    }>;
+    color?: string;
+    rating?: number;
+}
+interface Props {
+    team: TeamSummary;
+    onjoin?: () => void;
+    onclick?: () => void;
+    class?: string;
+}
+declare const TeamCard: import("svelte").Component<Props, {}, "">;
+type TeamCard = ReturnType<typeof TeamCard>;
+export default TeamCard;

package/dist/components/content/TwoFactorStepper.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  interface Props { current: number; steps?: string[]; class?: string; }
+  let { current, steps = ['Setup', 'Verify', 'Recovery'], class: className = '' }: Props = $props();
+</script>
+<ol class={'grid gap-2 sm:grid-cols-3 ' + className} aria-label="Progress">
+  {#each steps as step, index (step)}
+    <li class={'flex items-center gap-2 rounded-md border px-3 py-2 text-xs ' + (index < current ? 'border-success/30 bg-success/10 text-success' : index === current ? 'border-primary/30 bg-primary/10 font-medium text-primary' : 'border-border text-muted-foreground')}>
+      <span class="flex size-5 shrink-0 items-center justify-center rounded-full border text-[11px]">{index + 1}</span><span class="truncate">{step}</span>
+    </li>
+  {/each}
+</ol>

package/dist/components/content/TwoFactorStepper.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    current: number;
+    steps?: string[];
+    class?: string;
+}
+declare const TwoFactorStepper: import("svelte").Component<Props, {}, "">;
+type TwoFactorStepper = ReturnType<typeof TwoFactorStepper>;
+export default TwoFactorStepper;

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

@@ -0,0 +1,32 @@
+export { default as ContentPageShell } from './ContentPageShell.svelte';
+export { default as ContentPageHeader } from './ContentPageHeader.svelte';
+export { default as SectionHeader } from './SectionHeader.svelte';
+export { default as PageToolbar } from './PageToolbar.svelte';
+export { default as MetricBlock } from './MetricBlock.svelte';
+export { default as DescriptionList } from './DescriptionList.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';
+export { default as FilterToolbar } from './FilterToolbar.svelte';
+export { default as DataState } from './DataState.svelte';
+export type { DataStateKind } from './DataState.svelte';
+export { default as ProjectCard } from './ProjectCard.svelte';
+export type { ProjectSummary, ProjectStatus } from './ProjectCard.svelte';
+export { default as TeamCard } from './TeamCard.svelte';
+export type { TeamSummary } from './TeamCard.svelte';
+export { default as FileList } from './FileList.svelte';
+export type { FileItem } from './FileList.svelte';
+export { default as IntegrationCard } from './IntegrationCard.svelte';
+export type { IntegrationSummary } from './IntegrationCard.svelte';
+export { default as ApiKeyList } from './ApiKeyList.svelte';
+export type { ApiKeySummary } from './ApiKeyList.svelte';
+export { default as SecurityEventTable } from './SecurityEventTable.svelte';
+export type { SecurityEvent } from './SecurityEventTable.svelte';
+export { default as MemberList } from './MemberList.svelte';
+export type { MemberSummary } from './MemberList.svelte';
+export { default as ImportDropzone } from './ImportDropzone.svelte';
+export { default as NetworkUserCard } from './NetworkUserCard.svelte';
+export type { NetworkUser } from './NetworkUserCard.svelte';
+export { default as NetworkTable } from './NetworkTable.svelte';
+export type { NetworkColumn } from './NetworkTable.types.js';
+export { default as OtpInput } from './OtpInput.svelte';
+export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
+export { default as SystemErrorState } from './SystemErrorState.svelte';

package/dist/components/content/index.js

@@ -0,0 +1,22 @@
+export { default as ContentPageShell } from './ContentPageShell.svelte';
+export { default as ContentPageHeader } from './ContentPageHeader.svelte';
+export { default as SectionHeader } from './SectionHeader.svelte';
+export { default as PageToolbar } from './PageToolbar.svelte';
+export { default as MetricBlock } from './MetricBlock.svelte';
+export { default as DescriptionList } from './DescriptionList.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';
+export { default as FilterToolbar } from './FilterToolbar.svelte';
+export { default as DataState } from './DataState.svelte';
+export { default as ProjectCard } from './ProjectCard.svelte';
+export { default as TeamCard } from './TeamCard.svelte';
+export { default as FileList } from './FileList.svelte';
+export { default as IntegrationCard } from './IntegrationCard.svelte';
+export { default as ApiKeyList } from './ApiKeyList.svelte';
+export { default as SecurityEventTable } from './SecurityEventTable.svelte';
+export { default as MemberList } from './MemberList.svelte';
+export { default as ImportDropzone } from './ImportDropzone.svelte';
+export { default as NetworkUserCard } from './NetworkUserCard.svelte';
+export { default as NetworkTable } from './NetworkTable.svelte';
+export { default as OtpInput } from './OtpInput.svelte';
+export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
+export { default as SystemErrorState } from './SystemErrorState.svelte';