@svadmin/ui 0.86.0 → 0.88.1

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

@@ -9,10 +9,19 @@ export interface TimelineItem {
     tag?: string;
     meta?: Record<string, unknown>;
 }
+import type { Snippet } from 'svelte';
+import type { DataStateKind } from './DataState.svelte';
 interface Props {
     items?: TimelineItem[];
     emptyTitle?: string;
     emptyDescription?: string;
+    state?: DataStateKind;
+    stateTitle?: string;
+    stateDescription?: string;
+    retry?: () => void;
+    retryLabel?: string;
+    loadingLabel?: string;
+    action?: Snippet;
     class?: string;
 }
 declare const AuditTimeline: import("svelte").Component<Props, {}, "">;

package/dist/components/content/DataState.svelte

@@ -5,7 +5,7 @@
   import { Button } from '../ui/button/index.js';
   import * as Alert from '../ui/alert/index.js';
   import { Skeleton } from '../ui/skeleton/index.js';
-  export type DataStateKind = 'loading' | 'empty' | 'error' | 'forbidden';
+  export type DataStateKind = 'loading' | 'empty' | 'filtered-empty' | 'error' | 'forbidden';
   interface Props {
     state: DataStateKind;
     title?: string;
@@ -31,6 +31,7 @@
   const defaults = $derived({
     loading: [i18n.t('common.loading'), i18n.t('common.loading')],
     empty: [i18n.t('empty.title'), i18n.t('empty.description')],
+    'filtered-empty': [isZh ? '没有匹配结果' : 'No matching results', isZh ? '请调整或清除筛选条件。' : 'Adjust or clear your filters.'],
     error: [i18n.t('common.error'), i18n.t('common.retry')],
     forbidden: [isZh ? '无权访问' : 'Access restricted', isZh ? '你没有查看此内容的权限。' : 'You do not have permission to view this content.'],
   } as const);
@@ -41,11 +42,11 @@
 </script>
 
 {#if state === 'loading'}
-  <div class={'svadmin-u-6ed543e2fbbb svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-c07e54fd1439 ' + className} role="status" aria-live="polite" aria-label={resolvedLoadingLabel} aria-busy="true">
+  <div data-svadmin-data-state={state} class={'svadmin-u-6ed543e2fbbb svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-c07e54fd1439 ' + className} role="status" aria-live="polite" aria-label={resolvedLoadingLabel} aria-busy="true">
     <Skeleton class="svadmin-u-cd0d9c512cdc svadmin-u-84789e8a20cd" /><Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-6da6a3c3f741 svadmin-u-9794ab45094d" /><Skeleton class="svadmin-u-0a769880db93 svadmin-u-6da6a3c3f741" />
   </div>
 {:else if state === 'error' || state === 'forbidden'}
-  <Alert.Root variant={state === 'error' ? 'destructive' : 'warning'} class={className}>
+  <Alert.Root data-svadmin-data-state={state} variant={state === 'error' ? 'destructive' : 'warning'} class={className}>
     {#if state === 'error'}<AlertTriangle class="svadmin-u-f7b5fa971871" aria-hidden="true" />{:else}<LockKeyhole class="svadmin-u-f7b5fa971871" aria-hidden="true" />{/if}
     <Alert.Title>{resolvedTitle}</Alert.Title>
     <Alert.Description>{resolvedDescription}</Alert.Description>
@@ -53,7 +54,7 @@
     {#if action}<div class="svadmin-u-eccd13ef4f2f">{@render action()}</div>{/if}
   </Alert.Root>
 {:else}
-  <div class={'empty-state ' + className} role="status" aria-live="polite">
+  <div data-svadmin-data-state={state} class={'empty-state ' + className} role="status" aria-live="polite">
     <span class="empty-state__icon" aria-hidden="true">
       <Inbox size={16} />
     </span>

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-export type DataStateKind = 'loading' | 'empty' | 'error' | 'forbidden';
+export type DataStateKind = 'loading' | 'empty' | 'filtered-empty' | 'error' | 'forbidden';
 interface Props {
     state: DataStateKind;
     title?: string;

package/dist/components/content/FilterToolbar.svelte

@@ -38,9 +38,14 @@
     class: className = '',
   }: Props = $props();
 
+  let searchInput = $state<HTMLInputElement | null>(null);
   const advancedPanelId = `svadmin-filter-toolbar-advanced-${uid}`;
   const i18n = useTranslation();
   let mobile = $state(false);
+  function clearSearch(): void {
+    query = '';
+    searchInput?.focus();
+  }
   onMount(() => {
     const media = window.matchMedia('(max-width: 767px)');
     const update = () => { mobile = media.matches; };
@@ -57,6 +62,7 @@
         <Search class="svadmin-filter-toolbar__search-icon" aria-hidden="true" />
         <Input
           bind:value={query}
+          bind:ref={searchInput}
           {placeholder}
           class="svadmin-filter-toolbar__input"
           aria-label={placeholder}
@@ -68,7 +74,7 @@
             class="svadmin-filter-toolbar__clear"
             aria-label={clearLabel}
             title={clearLabel}
-            onclick={() => query = ''}
+            onclick={clearSearch}
           >
             <X class="svadmin-filter-toolbar__control-icon" aria-hidden="true" />
           </Button>

package/dist/components/content/WorkspaceLayout.svelte

@@ -10,6 +10,7 @@
     secondaryCollapsed?: boolean;
     secondaryCollapsedWidth?: string;
     mobileOrder?: 'primary-first' | 'secondary-first';
+    label?: string;
     class?: string;
   }
 
@@ -21,6 +22,7 @@
     secondaryCollapsed = false,
     secondaryCollapsedWidth = '3rem',
     mobileOrder = 'primary-first',
+    label,
     class: className = '',
   }: Props = $props();
 
@@ -28,7 +30,7 @@
   const resolvedSecondaryWidth = $derived(secondaryCollapsed ? secondaryCollapsedWidth : secondaryWidth);
 </script>
 
-<div class={styles.root + ' ' + className} data-svadmin-workspace-layout data-secondary-collapsed={secondaryCollapsed} style:--workspace-secondary-width={resolvedSecondaryWidth}>
+<div class={styles.root + ' ' + className} data-svadmin-workspace-layout data-workspace-order={mobileOrder} data-secondary-collapsed={secondaryCollapsed} {...(label ? { 'aria-label': label, role: 'region' } : {})} style:--workspace-secondary-width={resolvedSecondaryWidth}>
   {#if summary}<div class={styles.summary} data-svadmin-workspace-summary>{@render summary()}</div>{/if}
   <div class={styles.columns}>
     {#if mobileOrder === 'secondary-first' && secondary}<aside class={styles.secondary} data-svadmin-workspace-secondary>{@render secondary()}</aside>{/if}

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

@@ -7,6 +7,7 @@ interface Props {
     secondaryCollapsed?: boolean;
     secondaryCollapsedWidth?: string;
     mobileOrder?: 'primary-first' | 'secondary-first';
+    label?: string;
     class?: string;
 }
 declare const WorkspaceLayout: import("svelte").Component<Props, {}, "">;

package/dist/components/network/TeamCrewTablePage.svelte

@@ -5,6 +5,7 @@
   import ContentPageShell from '../content/ContentPageShell.svelte';
   import ContentPageHeader from '../content/ContentPageHeader.svelte';
   import FilterToolbar from '../content/FilterToolbar.svelte';
+  import DataState from '../content/DataState.svelte';
   import NetworkTable from '../content/NetworkTable.svelte';
   import type { NetworkColumn } from '../content/NetworkTable.types.js';
   import { Avatar } from '../ui/avatar/index.js';
@@ -38,5 +39,11 @@
   <ReferenceNotice />
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93"><ContentPageHeader title={i18n.t('network.teamCrew')} description={i18n.t('network.teamCrewDescription')} /><div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-77a2a20e90d4"><Button variant="outline" size="sm" onclick={() => downloadRows('sample-team.json', filtered)}><Download class="svadmin-u-783b0d9d1e2c" />{i18n.t('common.export')}</Button><Button size="sm" onclick={() => context.navigate('/account/members/team-members')}><UserPlus class="svadmin-u-783b0d9d1e2c" />{i18n.t('account.inviteMember')}</Button></div></div>
   <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
-  <NetworkTable rows={filtered} {columns} {row} />
+  {#if rows.length === 0}
+    <DataState state="empty" title={i18n.t('account.member')} />
+  {:else if filtered.length === 0}
+    <DataState state="filtered-empty" title={i18n.t('account.member')} description={i18n.t('common.search')} />
+  {:else}
+    <NetworkTable rows={filtered} {columns} {row} />
+  {/if}
 </ContentPageShell>

package/dist/components/network/UserCardsNFTPage.svelte

@@ -28,8 +28,10 @@
   <ReferenceNotice />
   <ContentPageHeader title={i18n.t('network.userCards')} description={i18n.t('network.userCardsDescription')} />
   <FilterToolbar bind:query placeholder={i18n.t('common.search')} clearLabel={i18n.locale === 'zh-CN' ? '清除搜索' : 'Clear search'} />
-  {#if filtered.length === 0}
+  {#if users.length === 0}
     <DataState state="empty" title={i18n.t('network.userCards')} />
+  {:else if filtered.length === 0}
+    <DataState state="filtered-empty" title={i18n.t('network.userCards')} description={i18n.t('common.search')} />
   {:else}
     <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff svadmin-u-b86f7f946cd8">
       {#each filtered as user (user.id)}

package/dist/components/profile/ProjectsGrid.svelte

@@ -34,7 +34,7 @@
   {#if projects.length === 0}
     <DataState state="empty" title={i18n.t('publicProfile.noProjects')} />
   {:else if filtered.length === 0}
-    <DataState state="empty" title={i18n.t('publicProfile.noProjects')} description={i18n.t('publicProfile.searchProjects')} />
+    <DataState state="filtered-empty" title={i18n.t('publicProfile.noProjects')} description={i18n.t('publicProfile.searchProjects')} />
   {:else}
     <div class={'svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd ' + gridClass}>
       {#each filtered as project (project.id)}

package/dist/components/profile/TeamsShowcase.svelte

@@ -13,5 +13,5 @@
 <section class="svadmin-u-3e7ce58d64fa">
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93"><div><h2 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('publicProfile.teamsCount', { count: filtered.length })}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('publicProfile.searchTeams')}</p></div></div>
   <FilterToolbar bind:query placeholder={i18n.t('publicProfile.searchTeams')} />
-  {#if filtered.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noTeams')} />{:else}<div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff svadmin-u-b86f7f946cd8">{#each filtered as team (team.id)}<TeamCard {team} />{/each}</div>{/if}
+  {#if teams.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noTeams')} />{:else if filtered.length === 0}<DataState state="filtered-empty" title={i18n.t('publicProfile.noTeams')} description={i18n.t('publicProfile.searchTeams')} />{:else}<div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff svadmin-u-b86f7f946cd8">{#each filtered as team (team.id)}<TeamCard {team} />{/each}</div>{/if}
 </section>

package/dist/design-contract.d.ts

@@ -9,7 +9,7 @@ export declare const surfaceDesignContract: {
         readonly density: readonly ["comfortable", "compact"];
     };
     readonly pageFamilies: readonly ["list", "form", "detail", "workspace", "dashboard"];
-    readonly pageStates: readonly ["ready", "loading", "empty", "error", "forbidden"];
+    readonly pageStates: readonly ["ready", "loading", "empty", "filtered-empty", "error", "forbidden"];
     readonly composition: {
         readonly maxPrimaryActions: 1;
         readonly secondaryActions: "overflow";

package/dist/design-contract.js

@@ -9,7 +9,7 @@ export const surfaceDesignContract = {
         density: ['comfortable', 'compact'],
     },
     pageFamilies: ['list', 'form', 'detail', 'workspace', 'dashboard'],
-    pageStates: ['ready', 'loading', 'empty', 'error', 'forbidden'],
+    pageStates: ['ready', 'loading', 'empty', 'filtered-empty', 'error', 'forbidden'],
     composition: {
         maxPrimaryActions: 1,
         secondaryActions: 'overflow',

package/dist/page-chrome.css

@@ -108,7 +108,7 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  .svadmin-filter-toolbar .svadmin-filter-toolbar__input {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__input[data-slot="input"] {
     height: var(--svadmin-filter-control-height);
     padding-inline: calc(var(--svadmin-space-5) + var(--svadmin-space-3));
     font-size: var(--svadmin-filter-control-font);
@@ -116,9 +116,9 @@
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__clear {
     position: absolute;
-    top: 50%;
+    inset-block: 0;
     inset-inline-end: var(--svadmin-space-1);
-    transform: translateY(-50%);
+    margin-block: auto;
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__toggle {
     flex-shrink: 0;

package/dist/recipes.d.ts

@@ -120,6 +120,12 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
+    density: {
+        compact: {
+            root: string;
+        };
+        comfortable: {};
+    };
 }, {
     root: string;
 }, undefined, {
@@ -134,6 +140,12 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
+    density: {
+        compact: {
+            root: string;
+        };
+        comfortable: {};
+    };
 }, {
     root: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -148,38 +160,28 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
             root: string;
         };
     };
+    density: {
+        compact: {
+            root: string;
+        };
+        comfortable: {};
+    };
 }, {
     root: string;
 }>>;
 declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            breadcrumbs?: import("tailwind-variants").ClassValue;
-            currentCrumb?: import("tailwind-variants").ClassValue;
-            eyebrow?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            breadcrumbs?: import("tailwind-variants").ClassValue;
-            currentCrumb?: import("tailwind-variants").ClassValue;
-            eyebrow?: import("tailwind-variants").ClassValue;
+    density: {
+        compact: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
         };
+        comfortable: {};
     };
-} | {}, {
+}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -190,20 +192,18 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
     description: string;
     actions: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            title?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
-            heading?: import("tailwind-variants").ClassValue;
-            breadcrumbs?: import("tailwind-variants").ClassValue;
-            currentCrumb?: import("tailwind-variants").ClassValue;
-            eyebrow?: import("tailwind-variants").ClassValue;
+    density: {
+        compact: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
         };
+        comfortable: {};
     };
-} | {}, {
+}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -213,7 +213,19 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
     title: string;
     description: string;
     actions: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<{
+    density: {
+        compact: {
+            root: string;
+            row: string;
+            heading: string;
+            title: string;
+            description: string;
+            actions: string;
+        };
+        comfortable: {};
+    };
+}, {
     root: string;
     breadcrumbs: string;
     currentCrumb: string;
@@ -611,6 +623,13 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
             state: string;
         };
     };
+    density: {
+        compact: {
+            card: string;
+            state: string;
+        };
+        comfortable: {};
+    };
 }, {
     root: string;
     card: string;
@@ -639,6 +658,13 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
             state: string;
         };
     };
+    density: {
+        compact: {
+            card: string;
+            state: string;
+        };
+        comfortable: {};
+    };
 }, {
     root: string;
     card: string;
@@ -667,6 +693,13 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
             state: string;
         };
     };
+    density: {
+        compact: {
+            card: string;
+            state: string;
+        };
+        comfortable: {};
+    };
 }, {
     root: string;
     card: string;
@@ -674,28 +707,17 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
     state: string;
 }>>;
 declare const surfaceTableRecipeStyles: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            state?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            head?: import("tailwind-variants").ClassValue;
-            header?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            cell?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            state?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            head?: import("tailwind-variants").ClassValue;
-            header?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            cell?: import("tailwind-variants").ClassValue;
+    density: {
+        compact: {
+            header: string;
+            content: string;
+            head: string;
+            cell: string;
+            state: string;
         };
+        comfortable: {};
     };
-} | {}, {
+}, {
     root: string;
     header: string;
     content: string;
@@ -703,24 +725,35 @@ declare const surfaceTableRecipeStyles: import("tailwind-variants").TVReturnType
     cell: string;
     state: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            state?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            head?: import("tailwind-variants").ClassValue;
-            header?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            cell?: import("tailwind-variants").ClassValue;
+    density: {
+        compact: {
+            header: string;
+            content: string;
+            head: string;
+            cell: string;
+            state: string;
         };
+        comfortable: {};
     };
-} | {}, {
+}, {
     root: string;
     header: string;
     content: string;
     head: string;
     cell: string;
     state: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<{
+    density: {
+        compact: {
+            header: string;
+            content: string;
+            head: string;
+            cell: string;
+            state: string;
+        };
+        comfortable: {};
+    };
+}, {
     root: string;
     header: string;
     content: string;

package/dist/recipes.js

@@ -62,8 +62,12 @@ const contentPageRecipeStyles = tv({
             default: { root: "max-w-[74rem]" },
             wide: { root: "max-w-[92rem]" },
         },
+        density: {
+            compact: { root: "space-y-[var(--svadmin-space-4)]" },
+            comfortable: {},
+        },
     },
-    defaultVariants: { width: "default" },
+    defaultVariants: { width: "default", density: "comfortable" },
 });
 const contentHeaderRecipeStyles = tv({
     slots: {
@@ -77,6 +81,20 @@ const contentHeaderRecipeStyles = tv({
         description: "max-w-[var(--svadmin-measure)] text-[length:var(--svadmin-text-body)] leading-[var(--svadmin-leading-body)] text-muted-foreground",
         actions: "flex shrink-0 flex-wrap items-center gap-[var(--svadmin-space-2)]",
     },
+    variants: {
+        density: {
+            compact: {
+                root: "space-y-[var(--svadmin-space-2)]",
+                row: "gap-[var(--svadmin-space-3)]",
+                heading: "space-y-[var(--svadmin-space-1)]",
+                title: "text-[length:var(--svadmin-text-section)] leading-[var(--svadmin-leading-tight)]",
+                description: "text-[length:var(--svadmin-text-label)] leading-[var(--svadmin-leading-body)]",
+                actions: "gap-[var(--svadmin-space-1)]",
+            },
+            comfortable: {},
+        },
+    },
+    defaultVariants: { density: "comfortable" },
 });
 const metricBlockRecipeStyles = tv({
     slots: {
@@ -177,8 +195,15 @@ const surfaceMetricRecipeStyles = tv({
             danger: { card: "border-s-destructive", state: "[--svadmin-metric-state-accent:var(--destructive)]" },
             info: { card: "border-s-info", state: "[--svadmin-metric-state-accent:var(--info)]" },
         },
+        density: {
+            compact: {
+                card: "p-3",
+                state: "[--svadmin-metric-state-padding:var(--svadmin-space-3)] [--svadmin-metric-state-height:4.5rem]",
+            },
+            comfortable: {},
+        },
     },
-    defaultVariants: { tone: "neutral" },
+    defaultVariants: { tone: "neutral", density: "comfortable" },
 });
 const surfaceTableRecipeStyles = tv({
     slots: {
@@ -189,6 +214,19 @@ const surfaceTableRecipeStyles = tv({
         cell: "surface-table__cell [&[data-slot=table-cell]]:py-[var(--svadmin-space-2)] [&[data-slot=table-cell]]:text-[length:var(--svadmin-text-body)]",
         state: "surface-table__state text-muted-foreground [--svadmin-table-state-height:var(--svadmin-table-state-min-h)]",
     },
+    variants: {
+        density: {
+            compact: {
+                header: "px-[var(--svadmin-space-3)]",
+                content: "px-[var(--svadmin-space-3)]",
+                head: "[&[data-slot=table-head]]:py-[var(--svadmin-space-1)] [&[data-slot=table-head]]:text-[length:var(--svadmin-text-caption)]",
+                cell: "[&[data-slot=table-cell]]:py-[var(--svadmin-space-1)] [&[data-slot=table-cell]]:text-[length:var(--svadmin-text-caption)]",
+                state: "[--svadmin-table-state-height:var(--svadmin-table-state-min-h-compact)]",
+            },
+            comfortable: {},
+        },
+    },
+    defaultVariants: { density: "comfortable" },
 });
 // undefined 使用公开默认值；null 显式禁用该变体，不能交给 tv 再补默认值。
 export const buttonRecipe = ({ variant = buttonRecipeDefaults.variant, size = buttonRecipeDefaults.size, ...props } = {}) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.86.0",
+  "version": "0.88.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [