@svadmin/ui 0.50.0 → 0.52.0

package/dist/components/content/AuditTimeline.svelte

@@ -0,0 +1,86 @@
+<script module lang="ts">
+  import type { Status } from './StatusBadge.svelte';
+
+  export interface TimelineItem {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp?: string;
+    actor?: string;
+    status?: Status;
+    tag?: string;
+    meta?: Record<string, unknown>;
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import StatusBadge from './StatusBadge.svelte';
+  import DataState from './DataState.svelte';
+
+  interface Props {
+    items?: TimelineItem[];
+    emptyTitle?: string;
+    emptyDescription?: string;
+    class?: string;
+  }
+
+  let {
+    items = [],
+    emptyTitle = 'No timeline events',
+    emptyDescription = 'Activity events and status transitions will appear here.',
+    class: className = '',
+  }: Props = $props();
+
+  const dotClass: Record<Status, string> = {
+    success: 'bg-success border-success/30 text-success',
+    warning: 'bg-warning border-warning/30 text-warning-foreground',
+    danger: 'bg-destructive border-destructive/30 text-destructive',
+    info: 'bg-primary border-primary/30 text-primary',
+    neutral: 'bg-muted-foreground border-border text-muted-foreground',
+  };
+</script>
+
+<div class={cn('space-y-4', className)}>
+  {#if items.length === 0}
+    <DataState state="empty" title={emptyTitle} description={emptyDescription} />
+  {:else}
+    <div class="relative pl-6 space-y-6 before:absolute before:left-2 before:top-2 before:bottom-2 before:w-0.5 before:bg-border">
+      {#each items as item (item.id)}
+        {@const statusTone = item.status ?? 'info'}
+        <div class="relative flex flex-col gap-1 text-sm group">
+          <span
+            class={cn(
+              'absolute -left-6 top-1 flex h-4 w-4 items-center justify-center rounded-full border-2 bg-background transition-transform group-hover:scale-110',
+              item.status ? dotClass[statusTone] : 'border-border bg-muted'
+            )}
+            aria-hidden="true"
+          ></span>
+
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <div class="flex items-center gap-2">
+              <span class="font-medium text-foreground">{item.title}</span>
+              {#if item.actor}
+                <span class="text-xs text-muted-foreground">by {item.actor}</span>
+              {/if}
+              {#if item.status}
+                <StatusBadge status={item.status} label={item.tag ?? item.status} class="text-[11px] py-0 h-4" />
+              {:else if item.tag}
+                <span class="inline-flex items-center rounded border border-border px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground bg-muted">
+                  {item.tag}
+                </span>
+              {/if}
+            </div>
+            {#if item.timestamp}
+              <time class="text-xs tabular-nums text-muted-foreground font-mono">{item.timestamp}</time>
+            {/if}
+          </div>
+
+          {#if item.description}
+            <p class="text-xs text-muted-foreground leading-relaxed whitespace-pre-wrap">{item.description}</p>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,20 @@
+import type { Status } from './StatusBadge.svelte';
+export interface TimelineItem {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp?: string;
+    actor?: string;
+    status?: Status;
+    tag?: string;
+    meta?: Record<string, unknown>;
+}
+interface Props {
+    items?: TimelineItem[];
+    emptyTitle?: string;
+    emptyDescription?: string;
+    class?: string;
+}
+declare const AuditTimeline: import("svelte").Component<Props, {}, "">;
+type AuditTimeline = ReturnType<typeof AuditTimeline>;
+export default AuditTimeline;

package/dist/components/content/DescriptionList.svelte

@@ -1,27 +1,137 @@
 <script lang="ts">
+  import { cn } from '../../utils.js';
+
   export interface DescriptionItem {
     label: string;
-    value: string | number;
+    value: unknown;
     description?: string;
     href?: string;
+    span?: number;
   }
+
   interface Props {
     items?: DescriptionItem[];
-    columns?: 1 | 2;
+    columns?: 1 | 2 | 3 | 4;
+    layout?: 'vertical' | 'horizontal';
+    bordered?: boolean;
+    density?: 'compact' | 'comfortable';
     class?: string;
   }
-  let { items = [], columns = 1, class: className = '' }: Props = $props();
-  const columnClass = $derived(columns === 2 ? 'sm:grid-cols-2' : 'grid-cols-1');
+
+  let {
+    items = [],
+    columns = 1,
+    layout = 'vertical',
+    bordered = false,
+    density = 'comfortable',
+    class: className = '',
+  }: Props = $props();
+
+  const isCompact = $derived(density === 'compact');
+  const isHorizontal = $derived(layout === 'horizontal');
+
+  function spanClass(span: number | undefined): string {
+    if (!span || span <= 1) return '';
+    if (span >= 4) return 'sm:col-span-4';
+    if (span === 3) return 'sm:col-span-3';
+    return 'sm:col-span-2';
+  }
+
+  const columnClass = $derived.by(() => {
+    switch (columns) {
+      case 4:
+        return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
+      case 3:
+        return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
+      case 2:
+        return 'grid-cols-1 sm:grid-cols-2';
+      default:
+        return 'grid-cols-1';
+    }
+  });
 </script>
 
-<dl class={'grid gap-x-6 gap-y-5 ' + columnClass + ' ' + className}>
-  {#each items as item (item.label)}
-    <div class="min-w-0">
-      <dt class="text-xs font-medium text-muted-foreground">{item.label}</dt>
-      <dd class="mt-1 break-words text-sm font-medium text-foreground">
-        {#if item.href}<a class="text-primary underline-offset-4 hover:underline" href={item.href}>{item.value}</a>{:else}{item.value}{/if}
-      </dd>
-      {#if item.description}<p class="mt-1 text-xs text-muted-foreground">{item.description}</p>{/if}
-    </div>
-  {/each}
-</dl>
+{#if bordered}
+  <div class={cn('overflow-hidden rounded-lg border border-border bg-card text-foreground', className)}>
+    <dl class={cn('grid divide-y divide-border/60 sm:divide-y-0', columnClass)}>
+      {#each items as item (item.label)}
+        <div
+          class={cn(
+            'flex flex-col border-b border-r border-border/40 last:border-b-0',
+            isHorizontal ? 'sm:flex-row' : '',
+            spanClass(Math.min(item.span ?? 1, columns)),
+          )}
+        >
+          <dt
+            class={cn(
+              'bg-muted/30 font-medium text-muted-foreground shrink-0 border-b sm:border-b-0 sm:border-r border-border/30',
+              isCompact ? 'px-3 py-1.5 text-xs' : 'px-4 py-2.5 text-xs sm:text-sm',
+              isHorizontal ? 'sm:w-1/3' : '',
+            )}
+          >
+            {item.label}
+          </dt>
+          <dd
+            class={cn(
+              'break-words font-medium text-foreground bg-card flex-1 min-w-0',
+              isCompact ? 'px-3 py-1.5 text-xs' : 'px-4 py-2.5 text-xs sm:text-sm',
+            )}
+          >
+            {#if item.href}
+              <a class="text-primary underline-offset-4 hover:underline" href={item.href}>{String(item.value ?? '—')}</a>
+            {:else}
+              {item.value != null ? String(item.value) : '—'}
+            {/if}
+            {#if item.description}
+              <p class="mt-0.5 text-xs font-normal text-muted-foreground">{item.description}</p>
+            {/if}
+          </dd>
+        </div>
+      {/each}
+    </dl>
+  </div>
+{:else}
+  <dl
+    class={cn(
+      'grid',
+      columnClass,
+      isCompact ? 'gap-x-4 gap-y-3' : 'gap-x-6 gap-y-5',
+      className,
+    )}
+  >
+    {#each items as item (item.label)}
+      <div
+        class={cn(
+          'min-w-0',
+          isHorizontal ? 'flex items-baseline gap-2' : '',
+          spanClass(Math.min(item.span ?? 1, columns)),
+        )}
+      >
+        <dt
+          class={cn(
+            'font-medium text-muted-foreground',
+            isCompact ? 'text-xs' : 'text-xs',
+            isHorizontal ? 'shrink-0 min-w-20' : '',
+          )}
+        >
+          {item.label}
+        </dt>
+        <dd
+          class={cn(
+            'break-words font-medium text-foreground min-w-0 flex-1',
+            isHorizontal ? 'text-xs sm:text-sm' : isCompact ? 'mt-0.5 text-xs sm:text-sm' : 'mt-1 text-sm',
+          )}
+        >
+          {#if item.href}
+            <a class="text-primary underline-offset-4 hover:underline" href={item.href}>{String(item.value ?? '—')}</a>
+          {:else}
+            {item.value != null ? String(item.value) : '—'}
+          {/if}
+          {#if item.description}
+            <p class="mt-1 text-xs font-normal text-muted-foreground">{item.description}</p>
+          {/if}
+        </dd>
+      </div>
+    {/each}
+  </dl>
+{/if}

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

@@ -1,12 +1,16 @@
 export interface DescriptionItem {
     label: string;
-    value: string | number;
+    value: unknown;
     description?: string;
     href?: string;
+    span?: number;
 }
 interface Props {
     items?: DescriptionItem[];
-    columns?: 1 | 2;
+    columns?: 1 | 2 | 3 | 4;
+    layout?: 'vertical' | 'horizontal';
+    bordered?: boolean;
+    density?: 'compact' | 'comfortable';
     class?: string;
 }
 declare const DescriptionList: import("svelte").Component<Props, {}, "">;

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

@@ -41,3 +41,5 @@ export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
 export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export type { FeedbackNoticeTone, FeedbackNoticePriority } from './FeedbackNotice.svelte';
+export { default as AuditTimeline } from './AuditTimeline.svelte';
+export type { TimelineItem } from './AuditTimeline.svelte';

package/dist/components/content/index.js

@@ -29,3 +29,4 @@ export { default as OtpInput } from './OtpInput.svelte';
 export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
 export { default as FeedbackNotice } from './FeedbackNotice.svelte';
+export { default as AuditTimeline } from './AuditTimeline.svelte';

package/dist/components/fields/BooleanField.svelte

@@ -1,13 +1,95 @@
+<script module lang="ts">
+  export type BooleanTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+</script>
+
 <script lang="ts">
-  interface Props { value: boolean | null | undefined; trueIcon?: string; falseIcon?: string }
-  let { value, trueIcon = '✓', falseIcon = '✗' }: Props = $props();
+  import { Badge } from '../ui/badge/index.js';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: boolean | null | undefined;
+    mode?: 'icon' | 'badge' | 'tag' | 'text';
+    trueIcon?: string;
+    falseIcon?: string;
+    trueLabel?: string;
+    falseLabel?: string;
+    nullLabel?: string;
+    trueTone?: BooleanTone;
+    falseTone?: BooleanTone;
+    class?: string;
+  }
+
+  let {
+    value,
+    mode = 'icon',
+    trueIcon = '✓',
+    falseIcon = '✗',
+    trueLabel = 'Yes',
+    falseLabel = 'No',
+    nullLabel = '—',
+    trueTone = 'success',
+    falseTone = 'danger',
+    class: className = '',
+  }: Props = $props();
+
+  const toneClass: Record<BooleanTone, 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>
-{#if value}
-  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-success/10 text-success">
-    {trueIcon}
+
+{#if value == null}
+  <span class={cn('text-muted-foreground', className)}>{nullLabel}</span>
+{:else if mode === 'badge' || mode === 'tag'}
+  <Badge
+    variant="outline"
+    class={cn(
+      'font-medium text-xs',
+      value ? toneClass[trueTone] : toneClass[falseTone],
+      className
+    )}
+  >
+    {value ? trueLabel : falseLabel}
+  </Badge>
+{:else if mode === 'text'}
+  <span
+    class={cn(
+      'font-medium text-sm',
+      value
+        ? trueTone === 'success'
+          ? 'text-success'
+          : 'text-foreground'
+        : falseTone === 'danger'
+          ? 'text-destructive'
+          : 'text-muted-foreground',
+      className
+    )}
+  >
+    {value ? trueLabel : falseLabel}
   </span>
 {:else}
-  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-destructive/10 text-destructive">
-    {falseIcon}
-  </span>
+  {#if value}
+    <span
+      class={cn(
+        'inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-semibold',
+        toneClass[trueTone],
+        className
+      )}
+    >
+      {trueIcon}
+    </span>
+  {:else}
+    <span
+      class={cn(
+        'inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-semibold',
+        toneClass[falseTone],
+        className
+      )}
+    >
+      {falseIcon}
+    </span>
+  {/if}
 {/if}

package/dist/components/fields/BooleanField.svelte.d.ts

@@ -1,7 +1,15 @@
+export type BooleanTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 interface Props {
     value: boolean | null | undefined;
+    mode?: 'icon' | 'badge' | 'tag' | 'text';
     trueIcon?: string;
     falseIcon?: string;
+    trueLabel?: string;
+    falseLabel?: string;
+    nullLabel?: string;
+    trueTone?: BooleanTone;
+    falseTone?: BooleanTone;
+    class?: string;
 }
 declare const BooleanField: import("svelte").Component<Props, {}, "">;
 type BooleanField = ReturnType<typeof BooleanField>;

package/dist/components/fields/DateField.svelte

@@ -1,6 +1,76 @@
+<script module lang="ts">
+  export type DateFieldFormat = 'date' | 'time' | 'datetime' | 'relative' | 'iso';
+</script>
+
 <script lang="ts">
-  interface Props { value: string | number | Date | null | undefined; locale?: string; options?: Intl.DateTimeFormatOptions }
-  let { value, locale = 'en-US', options = { dateStyle: 'medium' } }: Props = $props();
-  const formatted = $derived(value != null ? new Intl.DateTimeFormat(locale, options).format(new Date(value as string | number | Date)) : '—');
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: string | number | Date | null | undefined;
+    locale?: string;
+    format?: DateFieldFormat;
+    options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    locale = 'en-US',
+    format = 'date',
+    options,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  function formatRelative(date: Date, loc: string): string {
+    const now = Date.now();
+    const diffMs = date.getTime() - now;
+    const diffSec = Math.round(diffMs / 1000);
+    const diffMin = Math.round(diffSec / 60);
+    const diffHour = Math.round(diffMin / 60);
+    const diffDay = Math.round(diffHour / 24);
+
+    try {
+      const rtf = new Intl.RelativeTimeFormat(loc, { numeric: 'auto' });
+      if (Math.abs(diffSec) < 60) return rtf.format(diffSec, 'second');
+      if (Math.abs(diffMin) < 60) return rtf.format(diffMin, 'minute');
+      if (Math.abs(diffHour) < 24) return rtf.format(diffHour, 'hour');
+      if (Math.abs(diffDay) < 30) return rtf.format(diffDay, 'day');
+    } catch {
+      // Fallback
+    }
+    return new Intl.DateTimeFormat(loc, { dateStyle: 'medium' }).format(date);
+  }
+
+  const formatted = $derived.by(() => {
+    if (value == null || value === '') return nullLabel;
+    const d = value instanceof Date ? value : new Date(value);
+    if (isNaN(d.getTime())) return nullLabel;
+
+    if (format === 'iso') return d.toISOString();
+    if (format === 'relative') return formatRelative(d, locale);
+
+    const defaultOptions: Intl.DateTimeFormatOptions =
+      options ??
+      (format === 'datetime'
+        ? { dateStyle: 'medium', timeStyle: 'short' }
+        : format === 'time'
+          ? { timeStyle: 'medium' }
+          : { dateStyle: 'medium' });
+
+    try {
+      return new Intl.DateTimeFormat(locale, defaultOptions).format(d);
+    } catch {
+      return d.toLocaleDateString();
+    }
+  });
+
+  const fullIsoTitle = $derived.by(() => {
+    if (value == null || value === '') return undefined;
+    const d = value instanceof Date ? value : new Date(value);
+    return isNaN(d.getTime()) ? undefined : d.toISOString();
+  });
 </script>
-<span class="field-date">{formatted}</span>
+
+<span class={cn('field-date text-sm', className)} title={fullIsoTitle}>{formatted}</span>

package/dist/components/fields/DateField.svelte.d.ts

@@ -1,7 +1,11 @@
+export type DateFieldFormat = 'date' | 'time' | 'datetime' | 'relative' | 'iso';
 interface Props {
     value: string | number | Date | null | undefined;
     locale?: string;
+    format?: DateFieldFormat;
     options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    class?: string;
 }
 declare const DateField: import("svelte").Component<Props, {}, "">;
 type DateField = ReturnType<typeof DateField>;

package/dist/components/fields/NumberField.svelte

@@ -1,6 +1,74 @@
 <script lang="ts">
-  interface Props { value: number | string | null | undefined; locale?: string; options?: Intl.NumberFormatOptions }
-  let { value, locale = 'en-US', options = {} }: Props = $props();
-  const formatted = $derived(value != null ? new Intl.NumberFormat(locale, options).format(Number(value)) : '—');
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value: number | string | null | undefined;
+    locale?: string;
+    currency?: string;
+    unit?: string;
+    prefix?: string;
+    precision?: number;
+    compact?: boolean;
+    signed?: boolean;
+    tabular?: boolean;
+    options?: Intl.NumberFormatOptions;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    locale = 'en-US',
+    currency,
+    unit,
+    prefix,
+    precision,
+    compact = false,
+    signed = false,
+    tabular = true,
+    options = {},
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const formatted = $derived.by(() => {
+    if (value == null || value === '') return nullLabel;
+    const num = Number(value);
+    if (isNaN(num)) return nullLabel;
+
+    const opts: Intl.NumberFormatOptions = { ...options };
+
+    if (currency) {
+      opts.style = 'currency';
+      opts.currency = currency;
+    }
+    if (compact) {
+      opts.notation = 'compact';
+      opts.compactDisplay = 'short';
+    }
+    if (precision != null) {
+      opts.minimumFractionDigits = precision;
+      opts.maximumFractionDigits = precision;
+    }
+    if (signed && num > 0 && !currency) {
+      opts.signDisplay = 'always';
+    }
+
+    try {
+      let result = new Intl.NumberFormat(locale, opts).format(num);
+      if (prefix && !currency) {
+        result = `${prefix}${result}`;
+      }
+      if (unit) {
+        result = `${result} ${unit}`;
+      }
+      return result;
+    } catch {
+      return String(num);
+    }
+  });
 </script>
-<span class="field-number">{formatted}</span>
+
+<span class={cn('field-number text-sm', tabular && 'font-mono tabular-nums', className)}>
+  {formatted}
+</span>

package/dist/components/fields/NumberField.svelte.d.ts

@@ -1,7 +1,16 @@
 interface Props {
     value: number | string | null | undefined;
     locale?: string;
+    currency?: string;
+    unit?: string;
+    prefix?: string;
+    precision?: number;
+    compact?: boolean;
+    signed?: boolean;
+    tabular?: boolean;
     options?: Intl.NumberFormatOptions;
+    nullLabel?: string;
+    class?: string;
 }
 declare const NumberField: import("svelte").Component<Props, {}, "">;
 type NumberField = ReturnType<typeof NumberField>;