@svadmin/ui 0.73.0 → 0.74.0

package/dist/components/saved-list-views.js

@@ -1,3 +1,4 @@
+import { snapshotPlainData } from '@svadmin/core/schema';
 const STORAGE_VERSION = 1;
 const MAX_SAVED_VIEWS = 25;
 const MAX_FILTER_NODES = 200;
@@ -91,7 +92,63 @@ function parseState(value, allowedColumnIds) {
         columnOrder,
     };
 }
-export function readSavedListViews(raw, allowedColumnIds) {
+function parseAccess(value) {
+    if (!isRecord(value) || Object.keys(value).some(key => key !== 'mode' && key !== 'subjectIds'))
+        return;
+    const mode = value['mode'];
+    const ids = value['subjectIds'];
+    if ((mode !== 'team' && mode !== 'organization' && mode !== 'restricted')
+        || !Array.isArray(ids) || ids.length > 200)
+        return;
+    const subjectIds = [];
+    for (const id of ids) {
+        if (typeof id !== 'string' || !id.trim() || id !== id.trim() || id.length > 200
+            || subjectIds.includes(id))
+            return;
+        subjectIds.push(id);
+    }
+    if ((mode === 'restricted') !== (subjectIds.length > 0))
+        return;
+    return { mode, subjectIds };
+}
+export function decodeSavedListViewAccess(value) {
+    try {
+        return parseAccess(snapshotPlainData(value));
+    }
+    catch {
+        return;
+    }
+}
+export function decodeSavedListViewSubjects(value) {
+    try {
+        const snapshot = snapshotPlainData(value);
+        if (!Array.isArray(snapshot) || snapshot.length > 200)
+            return;
+        const seen = new Set();
+        const subjects = [];
+        for (const entry of snapshot) {
+            if (!isRecord(entry)
+                || Object.keys(entry).some(key => !['id', 'label', 'description'].includes(key))
+                || typeof entry['id'] !== 'string' || !entry['id'].trim() || entry['id'] !== entry['id'].trim()
+                || entry['id'].length > 200 || seen.has(entry['id'])
+                || typeof entry['label'] !== 'string' || !entry['label'].trim() || entry['label'].length > 200
+                || (entry['description'] !== undefined
+                    && (typeof entry['description'] !== 'string' || entry['description'].length > 500)))
+                return;
+            seen.add(entry['id']);
+            subjects.push({
+                id: entry['id'],
+                label: entry['label'].trim(),
+                ...(entry['description'] === undefined ? {} : { description: entry['description'] }),
+            });
+        }
+        return subjects;
+    }
+    catch {
+        return;
+    }
+}
+export function readSavedListViews(raw, allowedColumnIds, source = 'local') {
     if (!raw)
         return [];
     try {
@@ -110,8 +167,20 @@ export function readSavedListViews(raw, allowedColumnIds) {
             const state = parseState(entry['state'], allowedColumnIds);
             if (!state)
                 continue;
+            const access = entry['access'] === undefined ? undefined : parseAccess(entry['access']);
+            if (entry['access'] !== undefined && !access)
+                continue;
             seenIds.add(entry['id']);
-            views.push({ id: entry['id'], name: entry['name'].trim(), state });
+            views.push({
+                id: entry['id'], name: entry['name'].trim(), state,
+                ...(isPositiveInteger(entry['version'], Number.MAX_SAFE_INTEGER) ? { version: entry['version'] } : {}),
+                ...(source !== 'local' ? {
+                    source: entry['source'] === 'system' ? 'system' : 'team',
+                    readOnly: true,
+                    ...(entry['default'] === true ? { default: true } : {}),
+                    ...(access === undefined ? {} : { access }),
+                } : {}),
+            });
         }
         return views;
     }
@@ -121,6 +190,124 @@ export function readSavedListViews(raw, allowedColumnIds) {
         throw error;
     }
 }
+export function decodeSavedListViewMutationResult(value, allowedColumnIds, expected) {
+    try {
+        if (expected && (!expected.id.trim()
+            || !['team', 'system'].includes(expected.source)
+            || (expected.expectedVersion !== null
+                && !isPositiveInteger(expected.expectedVersion, Number.MAX_SAFE_INTEGER))))
+            return;
+        const snapshot = snapshotPlainData(value);
+        if (!isRecord(snapshot) || typeof snapshot['ok'] !== 'boolean')
+            return;
+        const keys = snapshot['ok'] ? ['ok', 'version', 'view'] : ['ok', 'code', 'version', 'current'];
+        if (Object.keys(snapshot).some(key => !keys.includes(key)))
+            return;
+        const parseReceiptView = (candidate, version) => {
+            if (!isRecord(candidate)
+                || Object.keys(candidate).some(key => !['id', 'name', 'state', 'version', 'source', 'readOnly', 'default', 'access'].includes(key))
+                || candidate['version'] !== version
+                || (candidate['readOnly'] !== undefined && typeof candidate['readOnly'] !== 'boolean')
+                || (candidate['default'] !== undefined && typeof candidate['default'] !== 'boolean')
+                || (candidate['source'] !== undefined && candidate['source'] !== 'team' && candidate['source'] !== 'system'))
+                return;
+            const access = candidate['access'] === undefined ? undefined : parseAccess(candidate['access']);
+            if (candidate['access'] !== undefined && !access)
+                return;
+            const state = candidate['state'];
+            if (!isRecord(state) || Object.keys(state).some(key => !['search', 'filters', 'sorters', 'pagination', 'columnVisibility', 'columnOrder'].includes(key)))
+                return;
+            if (!isRecord(state['pagination']) || Object.keys(state['pagination']).some(key => !['current', 'pageSize'].includes(key)))
+                return;
+            if (!isRecord(state['columnVisibility']) || Object.entries(state['columnVisibility'])
+                .some(([key, visible]) => !allowedColumnIds.has(key) || typeof visible !== 'boolean'))
+                return;
+            if (!Array.isArray(state['columnOrder']) || state['columnOrder'].some(key => typeof key !== 'string' || !allowedColumnIds.has(key))
+                || new Set(state['columnOrder']).size !== state['columnOrder'].length)
+                return;
+            if (!Array.isArray(state['sorters']) || state['sorters'].some(sorter => !isRecord(sorter) || Object.keys(sorter).some(key => !['field', 'order'].includes(key))))
+                return;
+            const exactFilter = (filter, depth = 0) => {
+                if (!isRecord(filter) || depth > 20)
+                    return false;
+                if ('field' in filter)
+                    return Object.keys(filter).every(key => ['field', 'operator', 'value'].includes(key));
+                return Object.keys(filter).every(key => ['operator', 'value'].includes(key))
+                    && Array.isArray(filter['value']) && filter['value'].every(child => exactFilter(child, depth + 1));
+            };
+            if (!Array.isArray(state['filters']) || !state['filters'].every(filter => exactFilter(filter)))
+                return;
+            const views = readSavedListViews(JSON.stringify({ version: STORAGE_VERSION, views: [candidate] }), allowedColumnIds);
+            const view = views[0];
+            if (!view || view.name !== candidate['name'])
+                return;
+            if (expected && (view.id !== expected.id || candidate['source'] !== expected.source))
+                return;
+            return {
+                ...view,
+                ...(candidate['source'] === undefined ? {} : { source: candidate['source'] }),
+                ...(candidate['readOnly'] === undefined ? {} : { readOnly: candidate['readOnly'] }),
+                ...(candidate['default'] === undefined ? {} : { default: candidate['default'] }),
+                ...(access === undefined ? {} : { access }),
+            };
+        };
+        if (snapshot['ok'] === true) {
+            if (!isPositiveInteger(snapshot['version'], Number.MAX_SAFE_INTEGER))
+                return;
+            if (expected?.expectedVersion !== undefined && expected.expectedVersion !== null
+                && snapshot['version'] <= expected.expectedVersion)
+                return;
+            const view = parseReceiptView(snapshot['view'], snapshot['version']);
+            if (!view)
+                return;
+            return { ok: true, view, version: snapshot['version'] };
+        }
+        if (snapshot['code'] !== 'VERSION_CONFLICT' || !isPositiveInteger(snapshot['version'], Number.MAX_SAFE_INTEGER))
+            return;
+        const current = parseReceiptView(snapshot['current'], snapshot['version']);
+        if (!current)
+            return;
+        return { ok: false, code: 'VERSION_CONFLICT', current, version: snapshot['version'] };
+    }
+    catch {
+        return;
+    }
+}
+export function decodeSavedListViewRemoveResult(value, expected) {
+    try {
+        const snapshot = snapshotPlainData(value);
+        if (!isRecord(snapshot) || snapshot['ok'] !== true
+            || Object.keys(snapshot).some(key => !['ok', 'id', 'version'].includes(key))
+            || snapshot['id'] !== expected.id
+            || !isPositiveInteger(expected.expectedVersion, Number.MAX_SAFE_INTEGER)
+            || !isPositiveInteger(snapshot['version'], Number.MAX_SAFE_INTEGER)
+            || snapshot['version'] <= expected.expectedVersion)
+            return;
+        return { ok: true, id: expected.id, version: snapshot['version'] };
+    }
+    catch {
+        return;
+    }
+}
+export function decodeRemoteSavedListViews(value, allowedColumnIds, writable = false) {
+    try {
+        const snapshot = snapshotPlainData(value);
+        if (!Array.isArray(snapshot))
+            return [];
+        return readSavedListViews(JSON.stringify({ version: STORAGE_VERSION, views: snapshot }), allowedColumnIds, 'team')
+            .map(view => {
+            const entry = snapshot.find(entry => isRecord(entry) && entry['id'] === view.id);
+            return {
+                ...view,
+                readOnly: !writable || !view.version || !isRecord(entry) || entry['readOnly'] !== false,
+                ...(isRecord(entry) && entry['default'] === true ? { default: true } : {}),
+            };
+        });
+    }
+    catch {
+        return [];
+    }
+}
 export function serializeSavedListViews(views) {
     return JSON.stringify({ version: STORAGE_VERSION, views: views.slice(0, MAX_SAVED_VIEWS) });
 }
@@ -137,10 +324,11 @@ export function listPreferenceScopeId(scope) {
         `r:${encodeURIComponent(scope.resourceName)}`,
         `p:${encodeURIComponent(scope.providerName)}`,
         `t:${encodeScopeValue(scope.tenantIdentity)}`,
+        ...(scope.identityKey === undefined ? [] : [`u:${encodeScopeValue(scope.identityKey)}`]),
     ].join('|');
 }
 export function canMigrateLegacyListPreferences(scope) {
-    return scope.providerName === 'default' && scope.tenantIdentity === undefined;
+    return scope.providerName === 'default' && scope.tenantIdentity === undefined && scope.identityKey === undefined;
 }
 export function savedListViewsStorageKey(scope) {
     return `svadmin-list-views-v2-${listPreferenceScopeId(scope)}`;

package/dist/components/table-contract.d.ts

@@ -1,7 +1,18 @@
-import type { BaseRecord } from '@svadmin/core';
+import type { BaseRecord, Filter, Sort } from '@svadmin/core';
 export type TableRecord = BaseRecord & {
     id: string | number;
 };
+export type BatchSelection = {
+    scope: 'selected';
+    ids: (string | number)[];
+    currentPageIds: (string | number)[];
+} | {
+    scope: 'all';
+    filters: Filter[];
+    sorters: Sort[];
+    total: number;
+    excludedIds: (string | number)[];
+};
 /** The list hook validates business fields; this adapter proves table identity and detaches UI reads. */
 export declare function copyTableRecord(value: unknown): TableRecord;
 export declare function tableRowKey(id: string | number): string;

package/dist/components/task-action.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { TaskProvider } from '@svadmin/core';
+export declare function createTaskAction(options: {
+    action: 'cancel' | 'retry';
+    taskId: string;
+    provider?: TaskProvider | undefined;
+    disabled: boolean;
+    onSuccess?: (() => void) | undefined;
+    onError?: ((error: unknown) => void) | undefined;
+}): {
+    run: () => Promise<void>;
+    readonly pending: boolean;
+    readonly available: boolean;
+};

package/dist/components/task-action.svelte.js

@@ -0,0 +1,73 @@
+import { onDestroy } from 'svelte';
+import { captureAdminContext, captureAuthSession, queryKeyMatches, TaskError, withValidatedTaskProvider } from '@svadmin/core';
+import { useQueryClient } from '@tanstack/svelte-query';
+export function createTaskAction(options) {
+    const context = captureAdminContext();
+    const client = useQueryClient();
+    const provider = $derived(options.provider ?? context.taskProvider);
+    const scope = $derived({
+        provider, id: options.taskId, tenant: context.tenantCacheKey?.__svadminTenant,
+        auth: context.authProvider, session: captureAuthSession(context.authProvider),
+        router: context.routerProvider, access: context.accessControlProvider,
+    });
+    let mounted = true;
+    let attempt = $state.raw();
+    function current(origin) {
+        return mounted && origin.provider === scope.provider && origin.id === scope.id
+            && origin.tenant === scope.tenant && origin.auth === scope.auth
+            && origin.router === scope.router && origin.access === scope.access
+            && origin.session.isCurrent();
+    }
+    onDestroy(() => { mounted = false; attempt = undefined; });
+    $effect.pre(() => {
+        if (attempt && !current(attempt.scope))
+            attempt = undefined;
+    });
+    const pending = $derived(!!attempt && current(attempt.scope));
+    const available = $derived(!options.disabled && scope.session.available && !!provider?.[options.action]);
+    async function run() {
+        if (!available || pending || !mounted || !provider)
+            return;
+        const origin = scope;
+        const token = { scope: origin };
+        const matcher = context.queryKeyMatcher();
+        const success = options.onSuccess;
+        const failure = options.onError;
+        attempt = token;
+        let error;
+        let failed = false;
+        let deliver;
+        try {
+            const operation = withValidatedTaskProvider(provider)[options.action];
+            if (!operation)
+                return;
+            await operation(origin.id);
+            if (!current(origin) || attempt !== token)
+                return;
+            await Promise.allSettled([client.invalidateQueries({
+                    predicate: query => queryKeyMatches(query.queryKey, { ...matcher, kind: 'task', action: 'list' })
+                        || queryKeyMatches(query.queryKey, { ...matcher, kind: 'task', action: 'one', id: origin.id }),
+                })]);
+        }
+        catch (cause) {
+            failed = true;
+            error = cause instanceof TaskError ? cause : new TaskError('TASK_PROVIDER_FAILED');
+        }
+        finally {
+            deliver = current(origin) && attempt === token;
+            if (attempt === token)
+                attempt = undefined;
+        }
+        if (!deliver || !current(origin))
+            return;
+        // 观察者异常不能被误报为服务端操作失败，也不能形成未处理的 Promise。
+        try {
+            if (failed)
+                await failure?.(error);
+            else
+                await success?.();
+        }
+        catch { /* 回调由宿主管理，不重试已发出的写入。 */ }
+    }
+    return { run, get pending() { return pending; }, get available() { return available; } };
+}

package/dist/components/ui/DesignSystemShowcase.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import { Button } from "./button/index.js";
+	import Badge from "./badge/badge.svelte";
+	import Checkbox from "./checkbox/checkbox.svelte";
+	import Input from "./input/input.svelte";
+	import Select from "./select/select.svelte";
+	import * as Tabs from "./tabs/index.js";
+	import * as DropdownMenu from "./dropdown-menu/index.js";
+	import * as Dialog from "./dialog/index.js";
+	import * as Tooltip from "./tooltip/index.js";
+	import * as Table from "./table/index.js";
+	import StatusBadge from "../content/StatusBadge.svelte";
+
+	let dialogOpen = $state(false);
+</script>
+
+<div class="svadmin-design-system-showcase">
+	<section aria-labelledby="buttons-heading">
+		<h2 id="buttons-heading">Button states / 按钮状态</h2>
+		<div class="svadmin-design-system-showcase__row">
+			<Button>Default</Button>
+			<Button variant="outline">Outline</Button>
+			<Button variant="secondary" size="sm">Compact</Button>
+			<Button disabled>Disabled</Button>
+		</div>
+	</section>
+
+	<section aria-labelledby="fields-heading">
+		<h2 id="fields-heading">Fields and selection / 字段与选择</h2>
+		<div class="svadmin-design-system-showcase__grid">
+			<Input aria-label="Default input" placeholder="Default" />
+			<Input aria-label="Compact input" size="compact" placeholder="Compact" />
+			<Select aria-label="Status" size="compact" placeholder="Choose a status" />
+			<label class="svadmin-design-system-showcase__checkbox">
+				<Checkbox aria-label="Enabled" size="compact" />
+				Enabled
+			</label>
+		</div>
+	</section>
+
+	<section aria-labelledby="status-heading">
+		<h2 id="status-heading">Semantic status / 语义状态</h2>
+		<div class="svadmin-design-system-showcase__row">
+			<Badge variant="subtle-success">Success</Badge>
+			<Badge variant="subtle-warning">Warning</Badge>
+			<Badge variant="subtle-destructive">Danger</Badge>
+			<Badge variant="outline" size="compact">Compact</Badge>
+		</div>
+	</section>
+
+	<section aria-labelledby="tabs-heading">
+		<h2 id="tabs-heading">Tabs interaction / 标签页交互</h2>
+		<Tabs.Root value="overview">
+			<Tabs.List aria-label="Design system sections">
+				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+				<Tabs.Trigger value="states">States</Tabs.Trigger>
+				<Tabs.Trigger value="disabled" disabled>Disabled</Tabs.Trigger>
+			</Tabs.List>
+			<Tabs.Content value="overview">Overview content</Tabs.Content>
+			<Tabs.Content value="states">State content</Tabs.Content>
+		</Tabs.Root>
+	</section>
+
+	<section aria-labelledby="overlay-heading">
+		<h2 id="overlay-heading">Menus and overlays / 菜单与浮层</h2>
+		<div class="svadmin-design-system-showcase__row">
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger class="svadmin-design-system-showcase__trigger">Menu</DropdownMenu.Trigger>
+				<DropdownMenu.Content>
+					<DropdownMenu.Item>View details</DropdownMenu.Item>
+					<DropdownMenu.Item disabled>Disabled action</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+			<Dialog.Root bind:open={dialogOpen}>
+				<Dialog.Trigger class="svadmin-design-system-showcase__trigger">Open dialog</Dialog.Trigger>
+				<Dialog.Content>
+					<Dialog.Header>
+						<Dialog.Title>Component dialog</Dialog.Title>
+						<Dialog.Description>Dialog focus and close behavior.</Dialog.Description>
+					</Dialog.Header>
+					<Dialog.Footer>
+						<Dialog.Close class="svadmin-design-system-showcase__trigger">Close</Dialog.Close>
+					</Dialog.Footer>
+				</Dialog.Content>
+			</Dialog.Root>
+			<Tooltip.Root>
+				<Tooltip.Trigger class="svadmin-design-system-showcase__trigger">Hover hint</Tooltip.Trigger>
+				<Tooltip.Content>Tooltip content</Tooltip.Content>
+			</Tooltip.Root>
+		</div>
+	</section>
+
+	<section aria-labelledby="table-heading">
+		<h2 id="table-heading">Table and status / 表格与状态</h2>
+		<div class="svadmin-design-system-showcase__row">
+			<StatusBadge status="success" label="Ready" />
+			<StatusBadge status="warning" label="Review" />
+			<StatusBadge status="danger" label="Blocked" />
+		</div>
+		<Table.Root>
+			<Table.Header>
+				<Table.Row>
+					<Table.Head>Component</Table.Head>
+					<Table.Head>State</Table.Head>
+				</Table.Row>
+			</Table.Header>
+			<Table.Body>
+				<Table.Row>
+					<Table.Cell>Table</Table.Cell>
+					<Table.Cell>Ready</Table.Cell>
+				</Table.Row>
+			</Table.Body>
+		</Table.Root>
+	</section>
+</div>
+
+<style>
+	.svadmin-design-system-showcase {
+		display: grid;
+		gap: 1.5rem;
+		max-width: 64rem;
+		padding: 1.5rem;
+		color: var(--foreground);
+		background: var(--background);
+	}
+
+	.svadmin-design-system-showcase section {
+		display: grid;
+		gap: 0.75rem;
+	}
+
+	.svadmin-design-system-showcase h2 {
+		margin: 0;
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+
+	.svadmin-design-system-showcase__row,
+	.svadmin-design-system-showcase__grid {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.svadmin-design-system-showcase__grid > :global(*) {
+		min-width: 12rem;
+		flex: 1 1 12rem;
+	}
+
+	.svadmin-design-system-showcase__checkbox {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	:global(.svadmin-design-system-showcase__trigger) {
+		border: 1px solid var(--border);
+		border-radius: 0.375rem;
+		background: var(--background);
+		padding: 0.375rem 0.625rem;
+		color: var(--foreground);
+	}
+</style>

package/dist/components/ui/DesignSystemShowcase.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DesignSystemShowcase: import("svelte").Component<Record<string, never>, {}, "">;
+type DesignSystemShowcase = ReturnType<typeof DesignSystemShowcase>;
+export default DesignSystemShowcase;

package/dist/components/ui/badge/badge-variants.d.ts

@@ -1,6 +1,7 @@
-export type BadgeVariant = "default" | "secondary" | "destructive" | "subtle" | "subtle-success" | "subtle-warning" | "subtle-destructive" | "subtle-pill" | "outline" | "ghost" | "link";
+import { type BadgeRecipeProps } from '../../../recipes.js';
+export type BadgeVariant = NonNullable<BadgeRecipeProps["variant"]>;
 export declare const badgeVariants: ({ variant, class: className, className: extraClassName, }?: {
-    variant?: BadgeVariant | null;
+    variant?: BadgeVariant | null | undefined;
     class?: string;
     className?: string;
 }) => string;

package/dist/components/ui/badge/badge-variants.js

@@ -1,3 +1,2 @@
-import { uiBadge } from '../../../styled-system/recipes/index.js';
-export const badgeVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-badge", variant && `svadmin-badge--${variant}`,
-    uiBadge(variant ? { variant } : {}), className, extraClassName].filter(Boolean).join(" ");
+import { badgeRecipe as uiBadge } from '../../../recipes.js';
+export const badgeVariants = ({ variant, class: className = "", className: extraClassName = "", } = {}) => uiBadge({ variant, class: [className, extraClassName].filter(Boolean).join(" ") }).root;

package/dist/components/ui/badge/badge.svelte

@@ -13,10 +13,12 @@
 		href,
 		class: className,
 		variant = "default",
+		size = "default",
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
 		variant?: BadgeVariantValue;
+		size?: "default" | "compact";
 	} = $props();
 </script>
 
@@ -25,6 +27,7 @@
 	bind:this={ref}
 	data-slot="badge"
 	data-variant={variant}
+	data-size={size}
 	{href}
 	class={cn(resolveBadgeVariants({ variant }), className)}
 	{...restProps}

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -4,6 +4,7 @@ import type { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     variant?: BadgeVariantValue;
+    size?: "default" | "compact";
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Badge = ReturnType<typeof Badge>;

package/dist/components/ui/button/button-variants.d.ts

@@ -1,8 +1,9 @@
-export type ButtonVariant = "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
-export type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+import { type ButtonRecipeProps } from '../../../recipes.js';
+export type ButtonVariant = NonNullable<ButtonRecipeProps["variant"]>;
+export type ButtonSize = NonNullable<ButtonRecipeProps["size"]>;
 export declare const buttonVariants: ({ variant, size, class: className, className: extraClassName, }?: {
-    variant?: ButtonVariant | null;
-    size?: ButtonSize | null;
+    variant?: ButtonVariant | null | undefined;
+    size?: ButtonSize | null | undefined;
     class?: string;
     className?: string;
 }) => string;

package/dist/components/ui/button/button-variants.js

@@ -1,5 +1,7 @@
-import { uiButton } from '../../../styled-system/recipes/index.js';
-// 保留公开 helper、语义标记和 null 行为；样式由预生成 Panda recipe 提供。
-export const buttonVariants = ({ variant = "default", size = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-button", variant && `svadmin-button--${variant}`, size && `svadmin-button-size--${size}`,
-    uiButton({ ...(variant ? { variant } : {}), ...(size ? { size } : {}) }),
-    className, extraClassName].filter(Boolean).join(" ");
+import { buttonRecipe } from '../../../recipes.js';
+// 只组合语义类，不要求消费者安装 Tailwind 编译器或 class merger。
+export const buttonVariants = ({ variant, size, class: className = "", className: extraClassName = "", } = {}) => buttonRecipe({
+    variant,
+    size,
+    class: [className, extraClassName].filter(Boolean).join(" "),
+}).root;

package/dist/components/ui/checkbox/checkbox.svelte

@@ -8,14 +8,18 @@
 		ref = $bindable(null),
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		size = "default",
 		class: className,
 		...restProps
-	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+	}: Omit<WithoutChildrenOrChild<CheckboxPrimitive.RootProps>, "size"> & {
+		size?: "default" | "compact";
+	} = $props();
 </script>
 
 <CheckboxPrimitive.Root
 	bind:ref
 	data-slot="checkbox"
+	data-size={size}
 	class={cn("svadmin-checkbox", className)}
 	bind:checked
 	bind:indeterminate

package/dist/components/ui/checkbox/checkbox.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Checkbox as CheckboxPrimitive } from "bits-ui";
-declare const Checkbox: import("svelte").Component<Omit<CheckboxPrimitive.RootProps, "children" | "child">, {}, "ref" | "checked" | "indeterminate">;
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+type $$ComponentProps = Omit<WithoutChildrenOrChild<CheckboxPrimitive.RootProps>, "size"> & {
+    size?: "default" | "compact";
+};
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/ui/input/input.svelte

@@ -11,7 +11,8 @@
 		? number | null | undefined
 		: string | null | undefined;
 
-	type Props = WithElementRef<Omit<HTMLInputAttributes, "type" | "value">> &
+	type Props = WithElementRef<Omit<HTMLInputAttributes, "type" | "value" | "size">> &
+			{ size?: "default" | "compact"; nativeSize?: number } &
 			(Type extends "file"
 				? { type: "file"; files?: FileList; value?: never }
 				: { type?: Type; files?: undefined; value?: InputValue });
@@ -22,6 +23,8 @@
 		type,
 		files = $bindable(),
 		disabled,
+		size = "default",
+		nativeSize,
 		class: className,
 		"data-slot": dataSlot = "input",
 		...restProps
@@ -30,7 +33,7 @@
 	const i18n = useTranslation();
 	const isFileInput = $derived(type?.toLowerCase() === "file");
 	const isDateInput = $derived(["date", "datetime-local", "month", "week", "time"].includes(type?.toLowerCase() ?? ""));
-	const attributes = $derived(definedOptions({ ...restProps, disabled }));
+	const attributes = $derived(definedOptions({ ...restProps, disabled, size: nativeSize }));
 	const selectedFiles = $derived(files ? Array.from(files) : []);
 	const selectedFileLabel = $derived.by(() => {
 		const firstFile = selectedFiles[0];
@@ -48,6 +51,7 @@
 		<input
 			bind:this={ref}
 			data-slot={dataSlot}
+			data-size={size}
 			data-input-type="file"
 			class={cn("svadmin-input", className)}
 			type="file"
@@ -63,6 +67,7 @@
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
+		data-size={size}
 			class={cn("svadmin-input", className)}
 			{type}
 			lang={isDateInput ? i18n.locale : undefined}