@svadmin/ui 0.51.0 → 0.53.0

package/dist/components/BatchActionBar.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { CheckCircle2, X } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    selectedCount?: number;
+    totalCount?: number;
+    selectedLabel?: string;
+    clearLabel?: string;
+    variant?: 'default' | 'floating' | 'subtle';
+    onclear?: () => void;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    selectedCount = 0,
+    totalCount,
+    selectedLabel,
+    clearLabel = 'Clear',
+    variant = 'default',
+    onclear,
+    actions,
+    children,
+    class: className = '',
+  }: Props = $props();
+
+  const isVisible = $derived(selectedCount > 0);
+  const displayText = $derived.by(() => {
+    if (selectedLabel) {
+      return selectedLabel.replace('{count}', String(selectedCount));
+    }
+    return totalCount !== undefined
+      ? `${selectedCount} of ${totalCount} selected`
+      : `${selectedCount} selected`;
+  });
+</script>
+
+{#if isVisible}
+  {#if variant === 'floating'}
+    <div
+      class={cn(
+        'fixed bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-3 rounded-lg border border-border/80 bg-background/95 px-4 py-2.5 shadow-2xl backdrop-blur-md transition-all duration-200 animate-in fade-in-0 slide-in-from-bottom-4',
+        className
+      )}
+      role="region"
+      aria-label="Batch Actions"
+    >
+      <div class="flex items-center gap-2 pr-2 border-r border-border/60">
+        <CheckCircle2 class="h-4 w-4 text-primary" />
+        <span class="text-xs font-medium text-foreground">{displayText}</span>
+      </div>
+
+      {#if actions}
+        <div class="flex items-center gap-1.5">
+          {@render actions()}
+        </div>
+      {/if}
+
+      {#if children}
+        <div class="flex items-center gap-1.5">
+          {@render children()}
+        </div>
+      {/if}
+
+      {#if onclear}
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+          onclick={onclear}
+          aria-label={clearLabel}
+        >
+          <X class="h-3.5 w-3.5 mr-1" />
+          {clearLabel}
+        </Button>
+      {/if}
+    </div>
+  {:else}
+    <div
+      class={cn(
+        'flex flex-wrap items-center justify-between gap-2 rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs transition-all duration-150',
+        variant === 'subtle' ? 'border-border/60 bg-muted/40' : '',
+        className
+      )}
+      role="region"
+      aria-label="Batch Actions"
+    >
+      <div class="flex items-center gap-2">
+        <Badge variant="secondary" class="h-5 px-1.5 font-semibold text-[11px] bg-primary/15 text-primary border-primary/20">
+          {selectedCount}
+        </Badge>
+        <span class="font-medium text-foreground">{displayText}</span>
+        {#if onclear}
+          <button
+            type="button"
+            class="text-muted-foreground hover:text-foreground underline underline-offset-2 ml-1 text-xs cursor-pointer focus:outline-none"
+            onclick={onclear}
+          >
+            {clearLabel}
+          </button>
+        {/if}
+      </div>
+
+      <div class="flex items-center gap-2">
+        {#if actions}
+          {@render actions()}
+        {/if}
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+    </div>
+  {/if}
+{/if}

package/dist/components/BatchActionBar.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    selectedCount?: number;
+    totalCount?: number;
+    selectedLabel?: string;
+    clearLabel?: string;
+    variant?: 'default' | 'floating' | 'subtle';
+    onclear?: () => void;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const BatchActionBar: import("svelte").Component<Props, {}, "">;
+type BatchActionBar = ReturnType<typeof BatchActionBar>;
+export default BatchActionBar;

package/dist/components/FilterDropdown.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Filter, X, Search } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import { clickOutside } from '../actions.js';
+  import { cn } from '../utils.js';
+
+  interface OptionItem {
+    label: string;
+    value: string | number;
+  }
+
+  interface Props {
+    title?: string;
+    open?: boolean;
+    active?: boolean;
+    value?: unknown;
+    options?: OptionItem[];
+    placeholder?: string;
+    applyLabel?: string;
+    resetLabel?: string;
+    align?: 'left' | 'right';
+    onapply?: (value: unknown) => void;
+    onreset?: () => void;
+    children?: Snippet;
+    trigger?: Snippet;
+    class?: string;
+  }
+
+  let {
+    title = 'Filter',
+    open = $bindable(false),
+    active,
+    value = $bindable(undefined),
+    options,
+    placeholder = 'Search...',
+    applyLabel = 'Apply',
+    resetLabel = 'Reset',
+    align = 'right',
+    onapply,
+    onreset,
+    children,
+    trigger,
+    class: className = '',
+  }: Props = $props();
+
+  type OptionValue = OptionItem['value'];
+
+  function isOptionValue(candidate: unknown): candidate is OptionValue {
+    return typeof candidate === 'string' || typeof candidate === 'number';
+  }
+
+  function getTextValue(candidate: unknown): string {
+    return typeof candidate === 'string' ? candidate : '';
+  }
+
+  function getSelectedValues(candidate: unknown): OptionValue[] {
+    if (Array.isArray(candidate)) return candidate.filter(isOptionValue);
+    return isOptionValue(candidate) && candidate !== '' ? [candidate] : [];
+  }
+
+  let internalTextValue = $state(getTextValue(value));
+  let internalSelectedValues = $state<OptionValue[]>(getSelectedValues(value));
+  let optionSearch = $state('');
+
+  // Keep the editable draft aligned with controlled value changes.
+  $effect(() => {
+    internalTextValue = getTextValue(value);
+    internalSelectedValues = getSelectedValues(value);
+  });
+
+  const isFilterActive = $derived(
+    active !== undefined
+      ? active
+      : Array.isArray(value)
+        ? value.length > 0
+        : value != null && value !== ''
+  );
+
+  const filteredOptions = $derived(
+    options
+      ? optionSearch
+        ? options.filter((opt) => opt.label.toLowerCase().includes(optionSearch.toLowerCase()))
+        : options
+      : []
+  );
+
+  function restoreDraft() {
+    internalTextValue = getTextValue(value);
+    internalSelectedValues = getSelectedValues(value);
+    optionSearch = '';
+  }
+
+  function handleClose() {
+    restoreDraft();
+    open = false;
+  }
+
+  function handleClickOutside() {
+    if (open) handleClose();
+  }
+
+  function handleTriggerClick() {
+    if (open) {
+      handleClose();
+    } else {
+      open = true;
+    }
+  }
+
+  function toggleOption(optValue: OptionValue) {
+    if (internalSelectedValues.includes(optValue)) {
+      internalSelectedValues = internalSelectedValues.filter((v) => v !== optValue);
+    } else {
+      internalSelectedValues = [...internalSelectedValues, optValue];
+    }
+  }
+
+  function handleApply() {
+    if (options && options.length > 0) {
+      const nextValue = [...internalSelectedValues];
+      value = nextValue;
+      onapply?.(nextValue);
+    } else if (!children) {
+      value = internalTextValue;
+      onapply?.(internalTextValue);
+    } else {
+      onapply?.(value);
+    }
+    optionSearch = '';
+    open = false;
+  }
+
+  function handleReset() {
+    internalTextValue = '';
+    internalSelectedValues = [];
+    optionSearch = '';
+    value = options && options.length > 0 ? [] : undefined;
+    onreset?.();
+    open = false;
+  }
+</script>
+
+<div class={cn('relative inline-block text-left', className)} use:clickOutside={handleClickOutside}>
+  {#if trigger}
+    {@render trigger()}
+  {:else}
+    <Button
+      variant={isFilterActive ? 'secondary' : 'ghost'}
+      size="icon-sm"
+      class={cn(
+        'relative h-7 w-7 rounded-sm p-0 transition-colors',
+        isFilterActive ? 'text-primary bg-primary/10 border border-primary/20 hover:bg-primary/20' : 'text-muted-foreground hover:text-foreground'
+      )}
+      onclick={handleTriggerClick}
+      aria-label={title}
+      aria-expanded={open}
+      aria-haspopup="dialog"
+      title={title}
+    >
+      <Filter class="h-3.5 w-3.5" />
+      {#if isFilterActive}
+        <span class="absolute -top-0.5 -right-0.5 flex h-2 w-2">
+          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+          <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+        </span>
+      {/if}
+    </Button>
+  {/if}
+
+  {#if open}
+    <div
+      class={cn(
+        'absolute z-50 mt-1.5 w-64 rounded-md border border-border bg-popover text-popover-foreground shadow-lg outline-none animate-in fade-in-0 zoom-in-95',
+        align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left'
+      )}
+      role="dialog"
+      aria-label={title}
+    >
+      <div class="flex items-center justify-between border-b border-border/60 px-3 py-2">
+        <span class="text-xs font-semibold text-foreground">{title}</span>
+        <button
+          type="button"
+          class="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+          onclick={handleClose}
+          aria-label="Close"
+        >
+          <X class="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      <div class="p-3">
+        {#if children}
+          {@render children()}
+        {:else if options && options.length > 0}
+          {#if options.length > 5}
+            <div class="relative mb-2">
+              <Search class="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                bind:value={optionSearch}
+                placeholder="Search options..."
+                class="h-7 pl-7 text-xs"
+              />
+            </div>
+          {/if}
+          <div class="max-h-44 overflow-y-auto space-y-1.5 pr-1">
+            {#each filteredOptions as opt (opt.value)}
+              <label class="flex items-center gap-2 rounded px-1.5 py-1 text-xs hover:bg-accent cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={internalSelectedValues.includes(opt.value)}
+                  onchange={() => toggleOption(opt.value)}
+                  class="h-3.5 w-3.5 rounded border-muted-foreground text-primary focus:ring-primary"
+                />
+                <span class="flex-1 truncate">{opt.label}</span>
+              </label>
+            {:else}
+              <div class="py-2 text-center text-xs text-muted-foreground">No options match</div>
+            {/each}
+          </div>
+        {:else}
+          <Input
+            bind:value={internalTextValue}
+            {placeholder}
+            class="h-8 text-xs"
+            onkeydown={(e) => { if (e.key === 'Enter') handleApply(); }}
+          />
+        {/if}
+      </div>
+
+      <div class="flex items-center justify-between border-t border-border/60 bg-muted/30 px-3 py-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+          onclick={handleReset}
+        >
+          {resetLabel}
+        </Button>
+        <Button
+          variant="default"
+          size="sm"
+          class="h-7 px-3 text-xs"
+          onclick={handleApply}
+        >
+          {applyLabel}
+        </Button>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/components/FilterDropdown.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+interface OptionItem {
+    label: string;
+    value: string | number;
+}
+interface Props {
+    title?: string;
+    open?: boolean;
+    active?: boolean;
+    value?: unknown;
+    options?: OptionItem[];
+    placeholder?: string;
+    applyLabel?: string;
+    resetLabel?: string;
+    align?: 'left' | 'right';
+    onapply?: (value: unknown) => void;
+    onreset?: () => void;
+    children?: Snippet;
+    trigger?: Snippet;
+    class?: string;
+}
+declare const FilterDropdown: import("svelte").Component<Props, {}, "value" | "open">;
+type FilterDropdown = ReturnType<typeof FilterDropdown>;
+export default FilterDropdown;

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/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/AvatarField.svelte

@@ -0,0 +1,123 @@
+<script module lang="ts">
+  export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'success' | 'warning' | 'error' | 'neutral';
+  export type AvatarSize = 'xs' | 'sm' | 'default' | 'lg';
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    src?: string | null | undefined;
+    name?: string | null | undefined;
+    subtitle?: string | null | undefined;
+    status?: AvatarStatus;
+    size?: AvatarSize;
+    shape?: 'circle' | 'square';
+    showName?: boolean;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    src,
+    name,
+    subtitle,
+    status,
+    size = 'sm',
+    shape = 'circle',
+    showName = false,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  let imgError = $state(false);
+
+  $effect(() => {
+    void src;
+    imgError = false;
+  });
+
+  const sizeClasses: Record<AvatarSize, { container: string; text: string; dot: string }> = {
+    xs: { container: 'h-5 w-5', text: 'text-[10px]', dot: 'h-1.5 w-1.5' },
+    sm: { container: 'h-7 w-7', text: 'text-xs', dot: 'h-2 w-2' },
+    default: { container: 'h-9 w-9', text: 'text-sm', dot: 'h-2.5 w-2.5' },
+    lg: { container: 'h-11 w-11', text: 'text-base', dot: 'h-3 w-3' },
+  };
+
+  const statusColors: Record<AvatarStatus, string> = {
+    online: 'bg-emerald-500',
+    success: 'bg-emerald-500',
+    busy: 'bg-rose-500',
+    error: 'bg-rose-500',
+    warning: 'bg-amber-500',
+    away: 'bg-amber-500',
+    offline: 'bg-slate-400',
+    neutral: 'bg-slate-400',
+  };
+
+  function getInitials(value?: string | null): string {
+    const trimmed = value?.trim();
+    if (!trimmed) return '?';
+
+    const parts = trimmed.split(/\s+/);
+    if (parts.length >= 2) {
+      return `${parts[0][0]}${parts.at(-1)?.[0] ?? ''}`.toUpperCase();
+    }
+    return trimmed.slice(0, 2).toUpperCase();
+  }
+
+  const initials = $derived(getInitials(name));
+  const hasContent = $derived(Boolean(src || name?.trim()));
+</script>
+
+{#if !hasContent}
+  <span class={cn('field-avatar text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <div class={cn('field-avatar inline-flex items-center gap-2.5', className)}>
+    <div class="relative inline-block shrink-0">
+      <div
+        class={cn(
+          'flex items-center justify-center overflow-hidden bg-muted font-medium text-muted-foreground select-none',
+          shape === 'circle' ? 'rounded-full' : 'rounded-md',
+          sizeClasses[size].container,
+          sizeClasses[size].text
+        )}
+      >
+        {#if src && !imgError}
+          <img
+            {src}
+            alt={name?.trim() || 'Avatar'}
+            class="h-full w-full object-cover"
+            onerror={() => { imgError = true; }}
+          />
+        {:else}
+          <span>{initials}</span>
+        {/if}
+      </div>
+
+      {#if status}
+        <span
+          class={cn(
+            'absolute bottom-0 right-0 rounded-full ring-2 ring-background',
+            statusColors[status],
+            sizeClasses[size].dot
+          )}
+          role="img"
+          aria-label={`Status: ${status}`}
+          title={`Status: ${status}`}
+        ></span>
+      {/if}
+    </div>
+
+    {#if showName && (name || subtitle)}
+      <div class="flex flex-col min-w-0 text-left">
+        {#if name}
+          <span class="truncate text-xs font-medium text-foreground leading-tight">{name}</span>
+        {/if}
+        {#if subtitle}
+          <span class="truncate text-[11px] text-muted-foreground leading-tight">{subtitle}</span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,16 @@
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'success' | 'warning' | 'error' | 'neutral';
+export type AvatarSize = 'xs' | 'sm' | 'default' | 'lg';
+interface Props {
+    src?: string | null | undefined;
+    name?: string | null | undefined;
+    subtitle?: string | null | undefined;
+    status?: AvatarStatus;
+    size?: AvatarSize;
+    shape?: 'circle' | 'square';
+    showName?: boolean;
+    nullLabel?: string;
+    class?: string;
+}
+declare const AvatarField: import("svelte").Component<Props, {}, "">;
+type AvatarField = ReturnType<typeof AvatarField>;
+export default AvatarField;