@svadmin/ui 0.49.3 → 0.51.0

package/dist/components/buttons/ShowButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Eye } from '@lucide/svelte';
@@ -7,11 +8,23 @@
 
   const i18n = useTranslation();
 
-  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
+  let {
+    resource,
+    recordItemId,
+    label,
+    children,
+    hideText = false,
+    accessControl = { enabled: true, hideIfUnauthorized: true },
+    onBeforeNavigate,
+    class: className = '',
+  } = $props<{
     resource: string;
     recordItemId: string | number;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
+    onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
   }>();
 
@@ -24,18 +37,33 @@
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const displayText = $derived(label ?? i18n.t('common.detail'));
+
+  function navigateToRecord() {
+    const navigate = () => nav.show(resource, recordItemId);
+    if (onBeforeNavigate) onBeforeNavigate(navigate);
+    else navigate();
+  }
 </script>
 
 {#if !hidden}
-
   <Button
     variant="ghost"
     size={hideText ? 'icon' : 'sm'}
     class={className}
+    aria-label={hideText ? displayText : undefined}
     disabled={!can.allowed}
-    onclick={() => nav.show(resource, recordItemId)}
+    onclick={navigateToRecord}
   >
     <Eye class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{i18n.t('common.detail')}</span>{/if}
+    {#if !hideText}
+      <span class="ml-1">
+        {#if children}
+          {@render children()}
+        {:else}
+          {displayText}
+        {/if}
+      </span>
+    {/if}
   </Button>
 {/if}

package/dist/components/buttons/ShowButton.svelte.d.ts

@@ -1,9 +1,13 @@
+import type { Snippet } from 'svelte';
 import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     recordItemId: string | number;
+    label?: string;
+    children?: Snippet;
     hideText?: boolean;
     accessControl?: ButtonAccessControl;
+    onBeforeNavigate?: (navigate: () => void) => void;
     class?: string;
 };
 declare const ShowButton: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -1,32 +1,105 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { Search, X } from '@lucide/svelte';
+  import { Search, X, SlidersHorizontal, ChevronDown, ChevronUp } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import { cn } from '../../utils.js';
+
   interface Props {
     query?: string;
     placeholder?: string;
     clearLabel?: string;
+    advancedLabel?: string;
+    showSearch?: boolean;
+    density?: 'compact' | 'comfortable';
+    activeFilterCount?: number;
+    advancedOpen?: boolean;
     filters?: Snippet;
     actions?: Snippet;
+    advanced?: Snippet;
     class?: string;
   }
+
   let {
     query = $bindable(''),
     placeholder = 'Search',
     clearLabel = 'Clear search',
+    advancedLabel = 'Filters',
+    showSearch = true,
+    density = 'compact',
+    activeFilterCount = 0,
+    advancedOpen = $bindable(false),
     filters,
     actions,
+    advanced,
     class: className = '',
   }: Props = $props();
+
+  const isCompact = $derived(density === 'compact');
 </script>
 
-<div class={'flex flex-col gap-2 sm:flex-row sm:items-center ' + className}>
-  <div class="relative min-w-0 flex-1">
-    <Search class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-    <Input bind:value={query} {placeholder} class="pl-9 pr-9" aria-label={placeholder} />
-    {#if query}<Button variant="ghost" size="icon-xs" class="absolute right-1 top-1/2 -translate-y-1/2" aria-label={clearLabel} title={clearLabel} onclick={() => query = ''}><X class="size-3.5" /></Button>{/if}
+<div class={cn('space-y-2', className)}>
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+    {#if showSearch}
+      <div class="relative min-w-0 flex-1">
+        <Search class={cn('pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground', isCompact ? 'size-3.5' : 'size-4')} />
+        <Input
+          bind:value={query}
+          {placeholder}
+          class={cn('pl-9 pr-9', isCompact ? 'h-8 text-xs' : 'h-9 text-sm')}
+          aria-label={placeholder}
+        />
+        {#if query}
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            class="absolute right-1 top-1/2 -translate-y-1/2"
+            aria-label={clearLabel}
+            title={clearLabel}
+            onclick={() => query = ''}
+          >
+            <X class="size-3.5" />
+          </Button>
+        {/if}
+      </div>
+    {/if}
+    {#if filters}
+      <div class="flex flex-wrap items-center gap-2">
+        {@render filters()}
+      </div>
+    {/if}
+    {#if advanced}
+      <Button
+        variant={advancedOpen ? 'secondary' : 'outline'}
+        size={isCompact ? 'sm' : 'default'}
+        class={cn('gap-1.5 shrink-0', isCompact ? 'h-8 text-xs px-2.5' : '')}
+        onclick={() => advancedOpen = !advancedOpen}
+        aria-expanded={advancedOpen}
+      >
+        <SlidersHorizontal class="size-3.5" />
+        <span>{advancedLabel}</span>
+        {#if activeFilterCount > 0}
+          <Badge variant="secondary" class="ml-0.5 h-4 min-w-4 px-1 text-[10px] leading-none font-semibold">
+            {activeFilterCount}
+          </Badge>
+        {/if}
+        {#if advancedOpen}
+          <ChevronUp class="size-3 text-muted-foreground ml-0.5" />
+        {:else}
+          <ChevronDown class="size-3 text-muted-foreground ml-0.5" />
+        {/if}
+      </Button>
+    {/if}
+    {#if actions}
+      <div class="flex shrink-0 flex-wrap items-center gap-2">
+        {@render actions()}
+      </div>
+    {/if}
   </div>
-  {#if filters}<div class="flex flex-wrap items-center gap-2">{@render filters()}</div>{/if}
-  {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+  {#if advanced && advancedOpen}
+    <div class="rounded-lg border border-border/60 bg-muted/20 p-3">
+      {@render advanced()}
+    </div>
+  {/if}
 </div>

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

@@ -3,10 +3,16 @@ interface Props {
     query?: string;
     placeholder?: string;
     clearLabel?: string;
+    advancedLabel?: string;
+    showSearch?: boolean;
+    density?: 'compact' | 'comfortable';
+    activeFilterCount?: number;
+    advancedOpen?: boolean;
     filters?: Snippet;
     actions?: Snippet;
+    advanced?: Snippet;
     class?: string;
 }
-declare const FilterToolbar: import("svelte").Component<Props, {}, "query">;
+declare const FilterToolbar: import("svelte").Component<Props, {}, "query" | "advancedOpen">;
 type FilterToolbar = ReturnType<typeof FilterToolbar>;
 export default FilterToolbar;

package/dist/components/content/StatusTabs.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  export interface StatusTabItem {
+    key: string;
+    label: string;
+    count?: number | string;
+    tone?: 'default' | 'success' | 'warning' | 'destructive' | 'info' | 'muted';
+    disabled?: boolean;
+  }
+
+  interface Props {
+    items: StatusTabItem[];
+    value?: string;
+    density?: 'compact' | 'comfortable';
+    variant?: 'pills' | 'underline' | 'segmented';
+    onchange?: (key: string) => void;
+    class?: string;
+  }
+
+  let {
+    items = [],
+    value = $bindable(items[0]?.key ?? ''),
+    density = 'compact',
+    variant = 'pills',
+    onchange,
+    class: className = '',
+  }: Props = $props();
+
+  function selectTab(key: string, disabled?: boolean) {
+    if (disabled || key === value) return;
+    value = key;
+    onchange?.(key);
+  }
+
+  type TabKeyboardEvent = KeyboardEvent & { currentTarget: EventTarget & HTMLButtonElement };
+
+  function handleKeydown(event: TabKeyboardEvent) {
+    const keys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+    if (!keys.includes(event.key)) return;
+
+    const tabList = event.currentTarget.closest('[role="tablist"]');
+    if (!tabList) return;
+
+    const tabs = Array.from(
+      tabList.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)')
+    );
+    const currentIndex = tabs.indexOf(event.currentTarget);
+    if (currentIndex === -1 || tabs.length === 0) return;
+
+    const nextIndex = event.key === 'Home'
+      ? 0
+      : event.key === 'End'
+        ? tabs.length - 1
+        : event.key === 'ArrowRight' || event.key === 'ArrowDown'
+          ? (currentIndex + 1) % tabs.length
+          : (currentIndex - 1 + tabs.length) % tabs.length;
+
+    event.preventDefault();
+    tabs[nextIndex]?.focus();
+    tabs[nextIndex]?.click();
+  }
+
+  const isCompact = $derived(density === 'compact');
+
+  const toneClasses: Record<string, { activeBadge: string; inactiveBadge: string }> = {
+    default: {
+      activeBadge: 'bg-primary/20 text-primary',
+      inactiveBadge: 'bg-muted text-muted-foreground',
+    },
+    success: {
+      activeBadge: 'bg-success/25 text-success',
+      inactiveBadge: 'bg-success/10 text-success',
+    },
+    warning: {
+      activeBadge: 'bg-warning/25 text-warning-foreground',
+      inactiveBadge: 'bg-warning/10 text-warning-foreground',
+    },
+    destructive: {
+      activeBadge: 'bg-destructive/25 text-destructive',
+      inactiveBadge: 'bg-destructive/10 text-destructive',
+    },
+    info: {
+      activeBadge: 'bg-info/25 text-info',
+      inactiveBadge: 'bg-info/10 text-info',
+    },
+    muted: {
+      activeBadge: 'bg-muted text-foreground',
+      inactiveBadge: 'bg-muted/50 text-muted-foreground',
+    },
+  };
+</script>
+
+<div
+  role="tablist"
+  aria-orientation="horizontal"
+  data-svadmin-status-tabs
+  data-density={density}
+  data-variant={variant}
+  class={cn(
+    'flex items-center gap-1 overflow-x-auto',
+    variant === 'segmented' && 'rounded-lg bg-muted p-1',
+    variant === 'underline' && 'border-b border-border gap-2',
+    className
+  )}
+>
+  {#each items as item (item.key)}
+    {@const active = value === item.key}
+    {@const tone = item.tone ?? 'default'}
+    {@const badgeTone = toneClasses[tone] ?? toneClasses.default}
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      tabindex={active ? 0 : -1}
+      disabled={item.disabled}
+      onclick={() => selectTab(item.key, item.disabled)}
+      onkeydown={handleKeydown}
+      class={cn(
+        'inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
+        isCompact ? 'text-xs px-2.5 py-1' : 'text-sm px-3 py-1.5',
+        variant === 'pills' && [
+          'rounded-md border',
+          active
+            ? 'border-border bg-background text-foreground shadow-xs font-semibold'
+            : 'border-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+        ],
+        variant === 'segmented' && [
+          'rounded-md',
+          active
+            ? 'bg-background text-foreground shadow-xs font-semibold'
+            : 'text-muted-foreground hover:text-foreground',
+        ],
+        variant === 'underline' && [
+          '-mb-px border-b-2 rounded-none px-3 pb-2 pt-1',
+          active
+            ? 'border-primary text-primary font-semibold'
+            : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/30',
+        ]
+      )}
+    >
+      <span>{item.label}</span>
+      {#if item.count !== undefined}
+        <span
+          class={cn(
+            'inline-flex items-center justify-center rounded-full font-semibold tabular-nums leading-none',
+            isCompact ? 'min-w-4 px-1 py-0.5 text-[10px]' : 'min-w-5 px-1.5 py-0.5 text-xs',
+            active ? badgeTone.activeBadge : badgeTone.inactiveBadge
+          )}
+        >
+          {item.count}
+        </span>
+      {/if}
+    </button>
+  {/each}
+</div>

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

@@ -0,0 +1,18 @@
+export interface StatusTabItem {
+    key: string;
+    label: string;
+    count?: number | string;
+    tone?: 'default' | 'success' | 'warning' | 'destructive' | 'info' | 'muted';
+    disabled?: boolean;
+}
+interface Props {
+    items: StatusTabItem[];
+    value?: string;
+    density?: 'compact' | 'comfortable';
+    variant?: 'pills' | 'underline' | 'segmented';
+    onchange?: (key: string) => void;
+    class?: string;
+}
+declare const StatusTabs: import("svelte").Component<Props, {}, "value">;
+type StatusTabs = ReturnType<typeof StatusTabs>;
+export default StatusTabs;

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

@@ -12,6 +12,8 @@ export { default as SettingsFieldRow } from './SettingsFieldRow.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 StatusTabs } from './StatusTabs.svelte';
+export type { StatusTabItem } from './StatusTabs.svelte';
 export { default as FilterToolbar } from './FilterToolbar.svelte';
 export { default as DataState } from './DataState.svelte';
 export type { DataStateKind } from './DataState.svelte';

package/dist/components/content/index.js

@@ -12,6 +12,7 @@ export { default as SettingsFieldRow } from './SettingsFieldRow.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 StatusTabs } from './StatusTabs.svelte';
 export { default as FilterToolbar } from './FilterToolbar.svelte';
 export { default as DataState } from './DataState.svelte';
 export { default as ProjectCard } from './ProjectCard.svelte';

package/dist/index.d.ts

@@ -172,6 +172,8 @@ export { default as DescriptionList } from './components/content/DescriptionList
 export type { DescriptionItem } from './components/content/DescriptionList.svelte';
 export { default as StatusBadge } from './components/content/StatusBadge.svelte';
 export type { Status } from './components/content/StatusBadge.svelte';
+export { default as StatusTabs } from './components/content/StatusTabs.svelte';
+export type { StatusTabItem } from './components/content/StatusTabs.svelte';
 export { default as FilterToolbar } from './components/content/FilterToolbar.svelte';
 export { default as DataState } from './components/content/DataState.svelte';
 export type { DataStateKind } from './components/content/DataState.svelte';

package/dist/index.js

@@ -183,6 +183,7 @@ export { default as SettingsFieldRow } from './components/content/SettingsFieldR
 export { default as MetricBlock } from './components/content/MetricBlock.svelte';
 export { default as DescriptionList } from './components/content/DescriptionList.svelte';
 export { default as StatusBadge } from './components/content/StatusBadge.svelte';
+export { default as StatusTabs } from './components/content/StatusTabs.svelte';
 export { default as FilterToolbar } from './components/content/FilterToolbar.svelte';
 export { default as DataState } from './components/content/DataState.svelte';
 export { default as ProjectCard } from './components/content/ProjectCard.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.49.3",
+  "version": "0.51.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.40.1",
+    "@svadmin/core": "^0.41.0",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",