@svadmin/ui 0.69.1 → 0.72.0

package/dist/components/fields/JsonField.svelte

@@ -2,6 +2,7 @@
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from '../ui/button/index.js';
   import { Copy, Check, ChevronDown, ChevronRight } from '@lucide/svelte';
+  import { formatJsonValue } from './json-value';
 
   const i18n = useTranslation();
 
@@ -12,29 +13,34 @@
   let expanded = $state(false);
   let copied = $state(false);
   let copyTimer: ReturnType<typeof setTimeout> | undefined;
+  let destroyed = false;
 
   $effect(() => {
-    return () => { if (copyTimer) clearTimeout(copyTimer); };
+    return () => { destroyed = true; if (copyTimer) clearTimeout(copyTimer); };
   });
 
-  const formatted = $derived(
-    value != null ? JSON.stringify(value, null, 2) : '—'
-  );
+  const display = $derived(formatJsonValue(value));
 
-  const preview = $derived(
-    value != null ? JSON.stringify(value).slice(0, 80) + (JSON.stringify(value).length > 80 ? '...' : '') : '—'
-  );
-
-  function copyJson() {
-    navigator.clipboard.writeText(formatted);
+  async function copyJson() {
+    if (display.status !== 'valid') return;
+    const clipboard = globalThis.navigator?.clipboard;
+    if (!clipboard?.writeText) return;
+    try {
+      await clipboard.writeText(display.formatted);
+    } catch {
+      return;
+    }
+    if (destroyed) return;
     copied = true;
     if (copyTimer) clearTimeout(copyTimer);
     copyTimer = setTimeout(() => { copied = false; }, 2000);
   }
 </script>
 
-{#if value == null}
+{#if display.status === 'empty'}
   <span class="svadmin-u-bfa603190748">—</span>
+{:else if display.status === 'invalid'}
+  <span role="status" data-svadmin-invalid-field>{i18n.t('validation.invalidFormat')}</span>
 {:else}
   <div class="svadmin-u-da7c36cd8867">
     <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
@@ -66,9 +72,9 @@
       </Button>
     </div>
     {#if expanded}
-      <pre class="svadmin-u-5f22e64f2282 svadmin-u-2ef11f1cb219 svadmin-u-eb6e8b881acd svadmin-u-359090c2d529 svadmin-u-73fc3fb18ceb svadmin-u-8aee2b07b47d svadmin-u-0e65706bcccd">{formatted}</pre>
+      <pre class="svadmin-u-5f22e64f2282 svadmin-u-2ef11f1cb219 svadmin-u-eb6e8b881acd svadmin-u-359090c2d529 svadmin-u-73fc3fb18ceb svadmin-u-8aee2b07b47d svadmin-u-0e65706bcccd">{display.formatted}</pre>
     {:else}
-      <code class="svadmin-u-359090c2d529 svadmin-u-0e65706bcccd svadmin-u-2ef11f1cb219 svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-07389a777c1f">{preview}</code>
+      <code class="svadmin-u-359090c2d529 svadmin-u-0e65706bcccd svadmin-u-2ef11f1cb219 svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-07389a777c1f">{display.preview}</code>
     {/if}
   </div>
 {/if}

package/dist/components/fields/PasswordField.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  let { value }: { value: string | null | undefined } = $props();
+</script>
+
+<span>{value ? '********' : '—'}</span>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    value: string | null | undefined;
+};
+declare const PasswordField: import("svelte").Component<$$ComponentProps, {}, "">;
+type PasswordField = ReturnType<typeof PasswordField>;
+export default PasswordField;

package/dist/components/fields/json-value.d.ts

@@ -0,0 +1,11 @@
+export declare const jsonValueSchema: import("@sinclair/typebox").TRecursive<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TNull, import("@sinclair/typebox").TBoolean, import("@sinclair/typebox").TNumber, import("@sinclair/typebox").TString, import("@sinclair/typebox").TArray<import("@sinclair/typebox").TThis>, import("@sinclair/typebox").TRecord<import("@sinclair/typebox").TString, import("@sinclair/typebox").TThis>]>>;
+export type JsonDisplay = {
+    status: 'empty';
+} | {
+    status: 'invalid';
+} | {
+    status: 'valid';
+    formatted: string;
+    preview: string;
+};
+export declare function formatJsonValue(value: unknown): JsonDisplay;

package/dist/components/fields/json-value.js

@@ -0,0 +1,28 @@
+import { Type } from '@sinclair/typebox';
+import { createExactSchemaValidator } from '@svadmin/core/schema';
+export const jsonValueSchema = Type.Recursive(Self => Type.Union([
+    Type.Null(), Type.Boolean(), Type.Number(), Type.String(),
+    Type.Array(Self), Type.Record(Type.String(), Self),
+]));
+const validator = createExactSchemaValidator(jsonValueSchema);
+export function formatJsonValue(value) {
+    if (value == null)
+        return { status: 'empty' };
+    try {
+        // Serialization rejects circular graphs before recursive schema traversal.
+        const compact = JSON.stringify(value);
+        if (typeof compact !== 'string' || !validator.Check(value))
+            return { status: 'invalid' };
+        const formatted = JSON.stringify(value, null, 2);
+        if (typeof formatted !== 'string')
+            return { status: 'invalid' };
+        return {
+            status: 'valid',
+            formatted,
+            preview: compact.slice(0, 80) + (compact.length > 80 ? '...' : ''),
+        };
+    }
+    catch {
+        return { status: 'invalid' };
+    }
+}

package/dist/components/profile/ActivityTimeline.svelte

@@ -12,7 +12,7 @@
   let { activities = [], showAutoRefresh = true }: Props = $props();
   let autoRefresh = $state(false);
   const i18n = useTranslation();
-  const config: Record<string, { icon: Component; tone: string; action: string }> = {
+  const config: Record<ActivityItem['type'], { icon: Component; tone: string; action: string }> = {
     posted: { icon: MessageSquare, tone: 'svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1', action: i18n.t('publicProfile.activityPosted') },
     commented: { icon: MessageSquare, tone: 'svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff', action: i18n.t('publicProfile.activityCommented') },
     joined: { icon: UserPlus, tone: 'svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748', action: i18n.t('publicProfile.activityJoined') },
@@ -23,5 +23,5 @@
 
 <section class="svadmin-u-3e7ce58d64fa">
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93"><SectionHeader title={i18n.t("publicProfile.activity")} />{#if showAutoRefresh}<div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-eb6a3cef9686"><Button size="sm" variant={autoRefresh ? "default" : "ghost"} onclick={() => autoRefresh = true}>{i18n.t("common.on")}</Button><Button size="sm" variant={!autoRefresh ? "default" : "ghost"} onclick={() => autoRefresh = false}>{i18n.t("common.off")}</Button></div>{/if}</div>
-  {#if activities.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noActivity')} />{:else}<Card.Card><Card.CardContent class="svadmin-u-8a539c7fe216"><div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">{#each activities as activity (activity.id)}{@const item = config[activity.type] ?? config.posted}<div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-1004c0c3954c svadmin-u-8e63407b5ceb">{#if activity.avatar}<Avatar src={activity.avatar} alt={activity.user} size="sm" />{:else}<span class={'svadmin-u-60fbb7713999 svadmin-u-d8f5213f0fe0 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 ' + item.tone}><item.icon class="svadmin-u-f7b5fa971871" /></span>{/if}<div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c"><p class="svadmin-u-fc7473ca09eb"><strong class="svadmin-u-d4108abe6359">{activity.user}</strong><span class="svadmin-u-bfa603190748"> {item.action} </span>{#if activity.target}<strong class="svadmin-u-d4108abe6359">{activity.target}</strong>{/if}</p>{#if activity.content}<p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{activity.content}</p>{/if}<p class="svadmin-u-b6b02c0ebef6 svadmin-u-359090c2d529 svadmin-u-bfa603190748">{activity.timestamp}</p></div></div>{/each}</div></Card.CardContent></Card.Card>{/if}
+  {#if activities.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noActivity')} />{:else}<Card.Card><Card.CardContent class="svadmin-u-8a539c7fe216"><div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">{#each activities as activity (activity.id)}{@const item = config[activity.type] ?? config['posted']}<div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-1004c0c3954c svadmin-u-8e63407b5ceb">{#if activity.avatar}<Avatar src={activity.avatar} alt={activity.user} size="sm" />{:else}<span class={'svadmin-u-60fbb7713999 svadmin-u-d8f5213f0fe0 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 ' + item.tone}><item.icon class="svadmin-u-f7b5fa971871" /></span>{/if}<div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c"><p class="svadmin-u-fc7473ca09eb"><strong class="svadmin-u-d4108abe6359">{activity.user}</strong><span class="svadmin-u-bfa603190748"> {item.action} </span>{#if activity.target}<strong class="svadmin-u-d4108abe6359">{activity.target}</strong>{/if}</p>{#if activity.content}<p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{activity.content}</p>{/if}<p class="svadmin-u-b6b02c0ebef6 svadmin-u-359090c2d529 svadmin-u-bfa603190748">{activity.timestamp}</p></div></div>{/each}</div></Card.CardContent></Card.Card>{/if}
 </section>

package/dist/components/record-detail.svelte.d.ts

@@ -0,0 +1,16 @@
+/** Views mount this only when they have an explicit record ID. */
+export declare function useRecordDetail(options: () => {
+    resourceName: string;
+    id: string | number;
+}): {
+    query: import("@tanstack/query-core").QueryObserverResult<import("@svadmin/core").GetOneResult<import("@svadmin/core").BaseRecord & {
+        id: string | number;
+    }>, unknown> & {
+        overtime: import("@svadmin/core").OvertimeResult;
+    };
+    readonly resource: import("@svadmin/core").ResourceDefinition;
+    readonly fields: import("@svadmin/core").FieldDefinition[];
+    readonly canRead: boolean;
+    readonly checkingPermission: boolean;
+    refresh(): Promise<void>;
+};

package/dist/components/record-detail.svelte.js

@@ -0,0 +1,28 @@
+import { captureAdminContext, useOne, useCan, useResourceContract } from '@svadmin/core';
+/** Views mount this only when they have an explicit record ID. */
+export function useRecordDetail(options) {
+    const context = captureAdminContext();
+    const binding = useResourceContract(() => options().resourceName);
+    const resource = $derived(context.getResource(options().resourceName));
+    const permission = useCan(() => ({
+        resource: options().resourceName, action: 'show', id: options().id,
+        queryOptions: { enabled: resource.canShow !== false },
+    }));
+    const canRead = $derived(resource.canShow !== false && permission.allowed === true);
+    const query = useOne(() => ({
+        resource: binding.resource, id: options().id, dataProviderName: binding.dataProviderName,
+        queryOptions: { enabled: canRead },
+    }));
+    return {
+        query,
+        get resource() { return resource; },
+        get fields() { return resource.fields.filter(field => field.showInShow !== false); },
+        get canRead() { return canRead; },
+        get checkingPermission() { return permission.isLoading; },
+        async refresh() {
+            if (!canRead || query.isFetching)
+                return;
+            await query.refetch();
+        },
+    };
+}

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

@@ -15,31 +15,31 @@ function isPositiveInteger(value, max) {
 function parseFilter(value, allowedFieldIds, budget, depth = 0) {
     if (depth > 20 || budget.remaining-- <= 0 || !isRecord(value))
         return undefined;
-    if (typeof value.field === 'string') {
-        if (!allowedFieldIds.has(value.field) || typeof value.operator !== 'string' || !CRUD_OPERATORS.has(value.operator) || !('value' in value)) {
+    if (typeof value['field'] === 'string') {
+        if (!allowedFieldIds.has(value['field']) || typeof value['operator'] !== 'string' || !CRUD_OPERATORS.has(value['operator']) || !('value' in value)) {
             return undefined;
         }
         return {
-            field: value.field,
-            operator: value.operator,
-            value: value.value,
+            field: value['field'],
+            operator: value['operator'],
+            value: value['value'],
         };
     }
-    if ((value.operator !== 'and' && value.operator !== 'or') || !Array.isArray(value.value))
+    if ((value['operator'] !== 'and' && value['operator'] !== 'or') || !Array.isArray(value['value']))
         return undefined;
-    const children = value.value.map((entry) => parseFilter(entry, allowedFieldIds, budget, depth + 1));
+    const children = value['value'].map((entry) => parseFilter(entry, allowedFieldIds, budget, depth + 1));
     if (children.some((entry) => entry === undefined))
         return undefined;
-    return { operator: value.operator, value: children };
+    return { operator: value['operator'], value: children };
 }
 function parseSorters(value, allowedFieldIds) {
     const sorters = [];
     for (const sorter of value) {
-        if (!isRecord(sorter) || typeof sorter.field !== 'string' || !allowedFieldIds.has(sorter.field))
+        if (!isRecord(sorter) || typeof sorter['field'] !== 'string' || !allowedFieldIds.has(sorter['field']))
             return undefined;
-        if (sorter.order !== 'asc' && sorter.order !== 'desc')
+        if (sorter['order'] !== 'asc' && sorter['order'] !== 'desc')
             return undefined;
-        sorters.push({ field: sorter.field, order: sorter.order });
+        sorters.push({ field: sorter['field'], order: sorter['order'] });
     }
     return sorters;
 }
@@ -62,30 +62,30 @@ function parseColumnOrder(value, allowedColumnIds) {
 function parseState(value, allowedColumnIds) {
     if (!isRecord(value))
         return undefined;
-    if (typeof value.search !== 'string' || value.search.length > 1_000)
+    if (typeof value['search'] !== 'string' || value['search'].length > 1_000)
         return undefined;
-    if (!Array.isArray(value.filters) || !Array.isArray(value.sorters))
+    if (!Array.isArray(value['filters']) || !Array.isArray(value['sorters']))
         return undefined;
-    if (!isRecord(value.pagination) || !isPositiveInteger(value.pagination.current, 1_000_000) || !isPositiveInteger(value.pagination.pageSize, 1_000)) {
+    if (!isRecord(value['pagination']) || !isPositiveInteger(value['pagination']['current'], 1_000_000) || !isPositiveInteger(value['pagination']['pageSize'], 1_000)) {
         return undefined;
     }
     const allowedFieldIds = new Set([...allowedColumnIds].filter((columnId) => !columnId.startsWith('_')));
     const filterBudget = { remaining: MAX_FILTER_NODES };
-    const filters = value.filters.map((entry) => parseFilter(entry, allowedFieldIds, filterBudget));
+    const filters = value['filters'].map((entry) => parseFilter(entry, allowedFieldIds, filterBudget));
     if (filters.some((entry) => entry === undefined))
         return undefined;
-    const sorters = parseSorters(value.sorters, allowedFieldIds);
-    const columnVisibility = parseColumnVisibility(value.columnVisibility, allowedColumnIds);
-    const columnOrder = parseColumnOrder(value.columnOrder, allowedColumnIds);
+    const sorters = parseSorters(value['sorters'], allowedFieldIds);
+    const columnVisibility = parseColumnVisibility(value['columnVisibility'], allowedColumnIds);
+    const columnOrder = parseColumnOrder(value['columnOrder'], allowedColumnIds);
     if (!sorters || !columnVisibility || !columnOrder)
         return undefined;
     return {
-        search: value.search,
+        search: value['search'],
         filters: filters,
         sorters,
         pagination: {
-            current: value.pagination.current,
-            pageSize: value.pagination.pageSize,
+            current: value['pagination']['current'],
+            pageSize: value['pagination']['pageSize'],
         },
         columnVisibility,
         columnOrder,
@@ -96,22 +96,22 @@ export function readSavedListViews(raw, allowedColumnIds) {
         return [];
     try {
         const parsed = JSON.parse(raw);
-        if (!isRecord(parsed) || parsed.version !== STORAGE_VERSION || !Array.isArray(parsed.views))
+        if (!isRecord(parsed) || parsed['version'] !== STORAGE_VERSION || !Array.isArray(parsed['views']))
             return [];
         const views = [];
         const seenIds = new Set();
-        for (const entry of parsed.views.slice(0, MAX_SAVED_VIEWS)) {
-            if (!isRecord(entry) || typeof entry.id !== 'string' || !entry.id.trim() || entry.id.length > 120)
+        for (const entry of parsed['views'].slice(0, MAX_SAVED_VIEWS)) {
+            if (!isRecord(entry) || typeof entry['id'] !== 'string' || !entry['id'].trim() || entry['id'].length > 120)
                 continue;
-            if (seenIds.has(entry.id))
+            if (seenIds.has(entry['id']))
                 continue;
-            if (typeof entry.name !== 'string' || !entry.name.trim() || entry.name.length > 60)
+            if (typeof entry['name'] !== 'string' || !entry['name'].trim() || entry['name'].length > 60)
                 continue;
-            const state = parseState(entry.state, allowedColumnIds);
+            const state = parseState(entry['state'], allowedColumnIds);
             if (!state)
                 continue;
-            seenIds.add(entry.id);
-            views.push({ id: entry.id, name: entry.name.trim(), state });
+            seenIds.add(entry['id']);
+            views.push({ id: entry['id'], name: entry['name'].trim(), state });
         }
         return views;
     }

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

@@ -0,0 +1,13 @@
+import type { BaseRecord } from '@svadmin/core';
+export type TableRecord = BaseRecord & {
+    id: 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;
+export declare function checkedTableRows(rows: readonly unknown[]): TableRecord[];
+/** Keep distinct display columns and neutralize spreadsheet expressions at this export boundary. */
+export declare function tableExportRows(rows: readonly TableRecord[], fields: readonly {
+    key: string;
+    label: string;
+}[]): Record<string, unknown>[];

package/dist/components/table-contract.js

@@ -0,0 +1,42 @@
+import { Type } from '@sinclair/typebox';
+import { checkExact, decodeBaseRecord, snapshotPlainData, rejectProviderResponse } from '@svadmin/core/schema';
+const recordShape = Type.Intersect([
+    Type.Record(Type.String(), Type.Unknown()),
+    Type.Object({ id: Type.Union([Type.String(), Type.Number()]) }),
+]);
+/** The list hook validates business fields; this adapter proves table identity and detaches UI reads. */
+export function copyTableRecord(value) {
+    const record = decodeBaseRecord(snapshotPlainData(value));
+    if (!checkExact(recordShape, record))
+        return rejectProviderResponse();
+    return record;
+}
+export function tableRowKey(id) {
+    return JSON.stringify([typeof id, id]);
+}
+export function checkedTableRows(rows) {
+    const records = rows.map(copyTableRecord);
+    const keys = new Set(records.map(record => tableRowKey(record.id)));
+    if (keys.size !== records.length)
+        return rejectProviderResponse();
+    return records;
+}
+/** Keep distinct display columns and neutralize spreadsheet expressions at this export boundary. */
+export function tableExportRows(rows, fields) {
+    const protect = (value) => typeof value === 'string' && (/^[\t\r\n]/.test(value) || /^\s*[=+@-]/.test(value))
+        ? `'${value}` : value;
+    const used = new Set();
+    const columns = fields.map(field => {
+        const base = String(protect(field.label));
+        let label = base;
+        let suffix = 1;
+        while (used.has(label))
+            label = `${base} (${suffix++})`;
+        used.add(label);
+        return { key: field.key, label };
+    });
+    return rows.map(row => {
+        const record = copyTableRecord(row);
+        return Object.fromEntries(columns.map(column => [column.label, protect(record[column.key] ?? null)]));
+    });
+}

package/dist/components/task-utils.js

@@ -20,8 +20,10 @@ const STATUS_ALIASES = {
     aborted: 'cancelled',
 };
 export function normalizeTaskStatus(status) {
-    const value = String(status ?? '').trim().toLowerCase();
-    return STATUS_ALIASES[value] ?? 'unknown';
+    if (typeof status !== 'string')
+        return 'unknown';
+    const value = status.trim().toLowerCase();
+    return Object.hasOwn(STATUS_ALIASES, value) ? STATUS_ALIASES[value] ?? 'unknown' : 'unknown';
 }
 export function isTaskActive(task) {
     const lifecycle = normalizeTaskStatus(task.status);

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

@@ -1,7 +1,6 @@
 export type AlertVariant = "default" | "destructive" | "warning" | "success";
 export declare const alertVariants: ({ variant, class: className, className: extraClassName, }?: {
     variant?: AlertVariant | null;
-    class?: Parameters<typeof clsx>[number];
-    className?: Parameters<typeof clsx>[number];
+    class?: string;
+    className?: string;
 }) => string;
-import { clsx } from "cn/engine";

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

@@ -1,2 +1 @@
-export const alertVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => clsx("svadmin-alert", variant && `svadmin-alert--${variant}`, className, extraClassName);
-import { clsx } from "cn/engine";
+export const alertVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-alert", variant && `svadmin-alert--${variant}`, className, extraClassName].filter(Boolean).join(" ");

package/dist/components/ui/alert/alert.svelte

@@ -1,15 +1,14 @@
 <script lang="ts" module>
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { alertVariants as variants, type AlertVariant as Variant } from "./alert-variants.js";
+	import { alertVariants as resolveAlertVariants, type AlertVariant as AlertVariantValue } from "./alert-variants.js";
 
-	export const alertVariants = variants;
-	export type AlertVariant = Variant;
+	export { alertVariants, type AlertVariant } from "./alert-variants.js";
 </script>
 
 <script lang="ts">
 	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		variant?: AlertVariant;
+		variant?: AlertVariantValue;
 	};
 
 	let {
@@ -26,7 +25,7 @@
 	data-slot="alert"
 	role="alert"
 	data-variant={variant}
-	class={cn(alertVariants({ variant }), className)}
+	class={cn(resolveAlertVariants({ variant }), className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,14 +1,9 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-import { type AlertVariant as Variant } from "./alert-variants.js";
-export declare const alertVariants: ({ variant, class: className, className: extraClassName, }?: {
-    variant?: Variant | null;
-    class?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-    className?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-}) => string;
-export type AlertVariant = Variant;
+import { type AlertVariant as AlertVariantValue } from "./alert-variants.js";
+export { alertVariants, type AlertVariant } from "./alert-variants.js";
 type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-    variant?: AlertVariant;
+    variant?: AlertVariantValue;
 };
 declare const Alert: import("svelte").Component<Props, {}, "ref">;
 type Alert = ReturnType<typeof Alert>;

package/dist/components/ui/alert/index.js

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import Alert, { alertVariants } from "./alert.svelte";
 import AlertTitle from "./alert-title.svelte";
 import AlertDescription from "./alert-description.svelte";

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

@@ -1,7 +1,6 @@
 export type AvatarSize = "default" | "sm" | "lg" | "xl";
 export declare const avatarVariants: ({ size, class: className, className: extraClassName, }?: {
     size?: AvatarSize | null;
-    class?: Parameters<typeof clsx>[number];
-    className?: Parameters<typeof clsx>[number];
+    class?: string;
+    className?: string;
 }) => string;
-import { clsx } from "cn/engine";

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

@@ -1,2 +1 @@
-export const avatarVariants = ({ size = "default", class: className = "", className: extraClassName = "", } = {}) => clsx("svadmin-avatar", size && `svadmin-avatar-size--${size}`, className, extraClassName);
-import { clsx } from "cn/engine";
+export const avatarVariants = ({ size = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-avatar", size && `svadmin-avatar-size--${size}`, className, extraClassName].filter(Boolean).join(" ");

package/dist/components/ui/avatar/avatar.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>
-	import { avatarVariants as variants, type AvatarSize as Size } from "./avatar-variants.js";
+	import { avatarVariants as resolveAvatarVariants, type AvatarSize as AvatarSizeValue } from "./avatar-variants.js";
 
-	export const avatarVariants = variants;
-	export type AvatarSize = Size;
+	export { avatarVariants, type AvatarSize } from "./avatar-variants.js";
 </script>
 
 <script lang="ts">
@@ -10,7 +9,7 @@
 	import type { HTMLImgAttributes } from "svelte/elements";
 
 	type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
-		size?: AvatarSize;
+		size?: AvatarSizeValue;
 		fallback?: string;
 	};
 
@@ -28,7 +27,7 @@
 </script>
 
 {#if src && !imgError}
-	<span data-size={size} class={cn(avatarVariants({ size }), className)}>
+	<span data-size={size} class={cn(resolveAvatarVariants({ size }), className)}>
 		<img
 			bind:this={ref}
 			data-slot="avatar"
@@ -44,7 +43,7 @@
 		data-slot="avatar-fallback"
 		data-size={size}
 		class={cn(
-			avatarVariants({ size }),
+			resolveAvatarVariants({ size }),
 			"svadmin-avatar-fallback",
 			className
 		)}

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

@@ -1,14 +1,9 @@
-import { type AvatarSize as Size } from "./avatar-variants.js";
-export declare const avatarVariants: ({ size, class: className, className: extraClassName, }?: {
-    size?: Size | null;
-    class?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-    className?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-}) => string;
-export type AvatarSize = Size;
+import { type AvatarSize as AvatarSizeValue } from "./avatar-variants.js";
+export { avatarVariants, type AvatarSize } from "./avatar-variants.js";
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLImgAttributes } from "svelte/elements";
 type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
-    size?: AvatarSize;
+    size?: AvatarSizeValue;
     fallback?: string;
 };
 declare const Avatar: import("svelte").Component<Props, {}, "ref">;

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

@@ -1,7 +1,6 @@
 export type BadgeVariant = "default" | "secondary" | "destructive" | "subtle" | "subtle-success" | "subtle-warning" | "subtle-destructive" | "subtle-pill" | "outline" | "ghost" | "link";
 export declare const badgeVariants: ({ variant, class: className, className: extraClassName, }?: {
     variant?: BadgeVariant | null;
-    class?: Parameters<typeof clsx>[number];
-    className?: Parameters<typeof clsx>[number];
+    class?: string;
+    className?: string;
 }) => string;
-import { clsx } from "cn/engine";

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

@@ -1,2 +1 @@
-export const badgeVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => clsx("svadmin-badge", variant && `svadmin-badge--${variant}`, className, extraClassName);
-import { clsx } from "cn/engine";
+export const badgeVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-badge", variant && `svadmin-badge--${variant}`, className, extraClassName].filter(Boolean).join(" ");

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

@@ -1,8 +1,7 @@
 <script lang="ts" module>
-	import { badgeVariants as variants, type BadgeVariant as Variant } from "./badge-variants.js";
+	import { badgeVariants as resolveBadgeVariants, type BadgeVariant as BadgeVariantValue } from "./badge-variants.js";
 
-	export const badgeVariants = variants;
-	export type BadgeVariant = Variant;
+	export { badgeVariants, type BadgeVariant } from "./badge-variants.js";
 </script>
 
 <script lang="ts">
@@ -17,7 +16,7 @@
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
-		variant?: BadgeVariant;
+		variant?: BadgeVariantValue;
 	} = $props();
 </script>
 
@@ -27,7 +26,7 @@
 	data-slot="badge"
 	data-variant={variant}
 	{href}
-	class={cn(badgeVariants({ variant }), className)}
+	class={cn(resolveBadgeVariants({ variant }), className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,14 +1,9 @@
-import { type BadgeVariant as Variant } from "./badge-variants.js";
-export declare const badgeVariants: ({ variant, class: className, className: extraClassName, }?: {
-    variant?: Variant | null;
-    class?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-    className?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-}) => string;
-export type BadgeVariant = Variant;
+import { type BadgeVariant as BadgeVariantValue } from "./badge-variants.js";
+export { badgeVariants, type BadgeVariant } from "./badge-variants.js";
 import type { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
-    variant?: BadgeVariant;
+    variant?: BadgeVariantValue;
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Badge = ReturnType<typeof Badge>;

package/dist/components/ui/badge/index.js

@@ -1,4 +1,2 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 export { default as Badge } from "./badge.svelte";
 export { badgeVariants } from "./badge.svelte";

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

@@ -3,7 +3,6 @@ export type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "
 export declare const buttonVariants: ({ variant, size, class: className, className: extraClassName, }?: {
     variant?: ButtonVariant | null;
     size?: ButtonSize | null;
-    class?: Parameters<typeof clsx>[number];
-    className?: Parameters<typeof clsx>[number];
+    class?: string;
+    className?: string;
 }) => string;
-import { clsx } from "cn/engine";

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

@@ -1,3 +1,2 @@
 // Keep the public helper for composition, while styles are owned by app.css.
-export const buttonVariants = ({ variant = "default", size = "default", class: className = "", className: extraClassName = "", } = {}) => clsx("svadmin-button", variant && `svadmin-button--${variant}`, size && `svadmin-button-size--${size}`, className, extraClassName);
-import { clsx } from "cn/engine";
+export const buttonVariants = ({ variant = "default", size = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-button", variant && `svadmin-button--${variant}`, size && `svadmin-button-size--${size}`, className, extraClassName].filter(Boolean).join(" ");