@svadmin/ui 0.68.0 → 0.69.0

package/dist/components/profile/PublicProfilePage.svelte

@@ -37,14 +37,14 @@
 <ContentPageShell {pageId} width="wide">
   <ContentPageHeader title={profileData.name} eyebrow={i18n.t('publicProfile.title')} description={profileData.tagline} />
   {#if showSections}
-    <div class="grid gap-6 xl:grid-cols-[20rem_minmax(0,1fr)]"><ProfileCard {...profileData} {variant} /><ProfileVariantSections {variant} /></div>
+    <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0d304f904cb0 svadmin-u-bf1b5b54929e"><ProfileCard {...profileData} {variant} /><ProfileVariantSections {variant} /></div>
   {:else if initialTab === 'projects'}
-    <div class="flex flex-wrap items-center justify-between gap-3 border-y border-border py-3"><div class="flex items-center gap-2"><Badge variant="outline">{columns} {columnLabel}</Badge><span class="text-sm text-muted-foreground">{visibleProjects.length} {i18n.t('publicProfile.projects')}</span></div><div class="flex gap-3 text-sm"><a class="text-primary" href="#/public-profile/projects/2-columns">2 {columnLabel}</a><a class="text-primary" href="#/public-profile/projects/3-columns">3 {columnLabel}</a></div></div>
-    <div class={columns === 2 ? 'grid gap-6 xl:grid-cols-[20rem_minmax(0,1fr)]' : 'space-y-5'}>{#if columns === 2}<ProfileCard {...profileData} {variant} />{/if}<ProjectsGrid projects={visibleProjects} {columns} /></div>
+    <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c svadmin-u-8b8196092091 svadmin-u-18049387f0af svadmin-u-1b2d54a3fd12"><div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4"><Badge variant="outline">{columns} {columnLabel}</Badge><span class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{visibleProjects.length} {i18n.t('publicProfile.projects')}</span></div><div class="svadmin-u-60fbb7713999 svadmin-u-1004c0c3954c svadmin-u-fc7473ca09eb"><a class="svadmin-u-20aaf08a7ed1" href="#/public-profile/projects/2-columns">2 {columnLabel}</a><a class="svadmin-u-20aaf08a7ed1" href="#/public-profile/projects/3-columns">3 {columnLabel}</a></div></div>
+    <div class={columns === 2 ? 'svadmin-u-f3c543ad5fe9 svadmin-u-0d304f904cb0 svadmin-u-bf1b5b54929e' : 'svadmin-u-b43b4c086d9a'}>{#if columns === 2}<ProfileCard {...profileData} {variant} />{/if}<ProjectsGrid projects={visibleProjects} {columns} /></div>
   {:else if initialTab === 'activity'}
-    <div class="grid gap-6 xl:grid-cols-[20rem_minmax(0,1fr)]"><ProfileCard {...profileData} {variant} /><div class="space-y-4"><div class="flex items-center justify-between border-b border-border pb-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('publicProfile.activity')}</h2><Badge variant="outline">{activities.length}</Badge></div><ActivityTimeline activities={activities} /></div></div>
+    <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0d304f904cb0 svadmin-u-bf1b5b54929e"><ProfileCard {...profileData} {variant} /><div class="svadmin-u-3e7ce58d64fa"><div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-65fdbade2025 svadmin-u-18049387f0af svadmin-u-7fcf9124b5df"><h2 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('publicProfile.activity')}</h2><Badge variant="outline">{activities.length}</Badge></div><ActivityTimeline activities={activities} /></div></div>
   {:else}
-    <div class="grid gap-4 sm:grid-cols-3">{#each profileData.stats as stat (stat.label)}<div class="border-l-2 border-primary pl-3"><p class="text-sm text-muted-foreground">{stat.label}</p><p class="mt-1 text-xl font-semibold text-foreground">{stat.value}</p></div>{/each}</div>
-    <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]"><TeamsShowcase {teams} /><ProfileCard {...profileData} {variant} /></div>
+    <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-ab1b20c2292a">{#each profileData.stats as stat (stat.label)}<div class="svadmin-u-f57e7530965b svadmin-u-6cbc84dd9e1a svadmin-u-81976f3f2c63"><p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{stat.label}</p><p class="svadmin-u-b6b02c0ebef6 svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{stat.value}</p></div>{/each}</div>
+    <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0d304f904cb0 svadmin-u-956fcc198f22"><TeamsShowcase {teams} /><ProfileCard {...profileData} {variant} /></div>
   {/if}
 </ContentPageShell>

package/dist/components/profile/TeamsShowcase.svelte

@@ -10,8 +10,8 @@
   const filtered = $derived(query ? teams.filter((team) => `${team.name} ${team.description}`.toLowerCase().includes(query.toLowerCase())) : teams);
 </script>
 
-<section class="space-y-4">
-  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"><div><h2 class="text-base font-semibold text-foreground">{i18n.t('publicProfile.teamsCount', { count: filtered.length })}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('publicProfile.searchTeams')}</p></div></div>
+<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="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{#each filtered as team (team.id)}<TeamCard {team} />{/each}</div>{/if}
+  {#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}
 </section>

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

@@ -10,7 +10,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-description"
-	class={cn("col-start-2 text-sm [&_p]:leading-relaxed text-muted-foreground", className)}
+	class={cn("svadmin-alert-description", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -10,7 +10,7 @@
 <h5
 	bind:this={ref}
 	data-slot="alert-title"
-	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+	class={cn("svadmin-alert-title", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -0,0 +1,7 @@
+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];
+}) => string;
+import { clsx } from "cn/engine";

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

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

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

@@ -1,22 +1,10 @@
 <script lang="ts" module>
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { alertVariants as variants, type AlertVariant as Variant } from "./alert-variants.js";
 
-	export const alertVariants = tv({
-		base: "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-		variants: {
-			variant: {
-				default: "bg-card text-foreground",
-				destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-				warning: "border-warning/50 text-warning-foreground bg-warning/10 [&>svg]:text-current",
-				success: "border-success/50 text-success bg-success/10 [&>svg]:text-current",
-			},
-		},
-		defaultVariants: { variant: "default" },
-	});
-
-	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+	export const alertVariants = variants;
+	export type AlertVariant = Variant;
 </script>
 
 <script lang="ts">
@@ -37,6 +25,7 @@
 	bind:this={ref}
 	data-slot="alert"
 	role="alert"
+	data-variant={variant}
 	class={cn(alertVariants({ variant }), className)}
 	{...restProps}
 >

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

@@ -1,29 +1,12 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-import { type VariantProps } from "tailwind-variants";
-export declare const alertVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "bg-card text-foreground";
-        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90";
-        warning: "border-warning/50 text-warning-foreground bg-warning/10 [&>svg]:text-current";
-        success: "border-success/50 text-success bg-success/10 [&>svg]:text-current";
-    };
-}, undefined, "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
-    variant: {
-        default: "bg-card text-foreground";
-        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90";
-        warning: "border-warning/50 text-warning-foreground bg-warning/10 [&>svg]:text-current";
-        success: "border-success/50 text-success bg-success/10 [&>svg]:text-current";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "bg-card text-foreground";
-        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90";
-        warning: "border-warning/50 text-warning-foreground bg-warning/10 [&>svg]:text-current";
-        success: "border-success/50 text-success bg-success/10 [&>svg]:text-current";
-    };
-}, undefined>>;
-export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+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;
 type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: AlertVariant;
 };

package/dist/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -14,12 +14,12 @@
 
 <AlertDialogPrimitive.Portal>
 	<AlertDialogPrimitive.Overlay
-		class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+		class="svadmin-alert-dialog-overlay"
 	/>
 	<AlertDialogPrimitive.Content
 		bind:ref
 		class={cn(
-			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+			"svadmin-alert-dialog-content",
 			className,
 		)}
 		{...restProps}

package/dist/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -11,6 +11,6 @@
 
 <AlertDialogPrimitive.Description
 	bind:ref
-	class={cn("text-sm text-muted-foreground", className)}
+	class={cn("svadmin-alert-dialog-description", className)}
 	{...restProps}
 />

package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -6,6 +6,6 @@
 	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
 </script>
 
-<div class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...restProps}>
+<div class={cn("svadmin-alert-dialog-footer", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -6,6 +6,6 @@
 	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...restProps}>
+<div class={cn("svadmin-alert-dialog-header", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -11,6 +11,6 @@
 
 <AlertDialogPrimitive.Overlay
 	bind:ref
-	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	class={cn("svadmin-alert-dialog-overlay", className)}
 	{...restProps}
 />

package/dist/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -11,6 +11,6 @@
 
 <AlertDialogPrimitive.Title
 	bind:ref
-	class={cn("text-lg font-semibold", className)}
+	class={cn("svadmin-alert-dialog-title", className)}
 	{...restProps}
 />

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

@@ -0,0 +1,7 @@
+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];
+}) => string;
+import { clsx } from "cn/engine";

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

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

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

@@ -1,23 +1,13 @@
+<script lang="ts" module>
+	import { avatarVariants as variants, type AvatarSize as Size } from "./avatar-variants.js";
+
+	export const avatarVariants = variants;
+	export type AvatarSize = Size;
+</script>
+
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLImgAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
-
-	export const avatarVariants = tv({
-		base: "relative flex shrink-0 overflow-hidden rounded-full",
-		variants: {
-			size: {
-				default: "size-10",
-				sm: "size-8",
-				lg: "size-12",
-				xl: "size-16",
-			},
-		},
-		defaultVariants: { size: "default" },
-	});
-
-	// AvatarSize type is exported from the package index.ts
-	type AvatarSize = VariantProps<typeof avatarVariants>["size"];
 
 	type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
 		size?: AvatarSize;
@@ -38,13 +28,13 @@
 </script>
 
 {#if src && !imgError}
-	<span class={cn(avatarVariants({ size }), className)}>
+	<span data-size={size} class={cn(avatarVariants({ size }), className)}>
 		<img
 			bind:this={ref}
 			data-slot="avatar"
 			{src}
 			{alt}
-			class="aspect-square h-full w-full object-cover"
+			class="svadmin-avatar-image"
 			onerror={() => { imgError = true; }}
 			{...restProps}
 		/>
@@ -52,9 +42,10 @@
 {:else}
 	<span
 		data-slot="avatar-fallback"
+		data-size={size}
 		class={cn(
 			avatarVariants({ size }),
-			"flex items-center justify-center bg-muted text-muted-foreground font-medium text-sm",
+			"svadmin-avatar-fallback",
 			className
 		)}
 	>

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

@@ -1,32 +1,16 @@
+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 WithElementRef } from "../../../utils.js";
 import type { HTMLImgAttributes } from "svelte/elements";
-declare const Avatar: import("svelte").Component<HTMLImgAttributes & {
-    ref?: HTMLImageElement | null | undefined;
-} & {
-    size?: "default" | "sm" | "lg" | "xl" | undefined;
+type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
+    size?: AvatarSize;
     fallback?: string;
-}, {
-    avatarVariants: import("tailwind-variants").TVReturnType<{
-        size: {
-            default: "size-10";
-            sm: "size-8";
-            lg: "size-12";
-            xl: "size-16";
-        };
-    }, undefined, "relative flex shrink-0 overflow-hidden rounded-full", {
-        size: {
-            default: "size-10";
-            sm: "size-8";
-            lg: "size-12";
-            xl: "size-16";
-        };
-    }, undefined, import("tailwind-variants").TVReturnTypeLike<{
-        size: {
-            default: "size-10";
-            sm: "size-8";
-            lg: "size-12";
-            xl: "size-16";
-        };
-    }, undefined>>;
-}, "ref">;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "ref">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

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

@@ -0,0 +1,7 @@
+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];
+}) => string;
+import { clsx } from "cn/engine";

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

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

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

@@ -1,29 +1,8 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { badgeVariants as variants, type BadgeVariant as Variant } from "./badge-variants.js";
 
-	export const badgeVariants = tv({
-		base: "h-5 gap-1 rounded-[min(var(--radius-sm),10px)] border border-transparent px-2.5 py-0.5 text-xs font-semibold transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-				subtle: "bg-primary/10 text-primary border-primary/20 [a]:hover:bg-primary/15",
-				"subtle-success": "bg-success/10 text-success border-success/20 [a]:hover:bg-success/15",
-				"subtle-warning": "bg-warning/10 text-warning border-warning/20 [a]:hover:bg-warning/15",
-				"subtle-destructive": "bg-destructive/10 text-destructive border-destructive/20 [a]:hover:bg-destructive/15",
-				"subtle-pill": "rounded-full bg-muted/70 text-muted-foreground border-border/80 font-medium",
-				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+	export const badgeVariants = variants;
+	export type BadgeVariant = Variant;
 </script>
 
 <script lang="ts">
@@ -46,6 +25,7 @@
 	this={href ? "a" : "span"}
 	bind:this={ref}
 	data-slot="badge"
+	data-variant={variant}
 	{href}
 	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}

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

@@ -1,48 +1,10 @@
-import { type VariantProps } from "tailwind-variants";
-export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
-        subtle: "bg-primary/10 text-primary border-primary/20 [a]:hover:bg-primary/15";
-        "subtle-success": "bg-success/10 text-success border-success/20 [a]:hover:bg-success/15";
-        "subtle-warning": "bg-warning/10 text-warning border-warning/20 [a]:hover:bg-warning/15";
-        "subtle-destructive": "bg-destructive/10 text-destructive border-destructive/20 [a]:hover:bg-destructive/15";
-        "subtle-pill": "rounded-full bg-muted/70 text-muted-foreground border-border/80 font-medium";
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground";
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-}, undefined, "h-5 gap-1 rounded-[min(var(--radius-sm),10px)] border border-transparent px-2.5 py-0.5 text-xs font-semibold transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", {
-    variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
-        subtle: "bg-primary/10 text-primary border-primary/20 [a]:hover:bg-primary/15";
-        "subtle-success": "bg-success/10 text-success border-success/20 [a]:hover:bg-success/15";
-        "subtle-warning": "bg-warning/10 text-warning border-warning/20 [a]:hover:bg-warning/15";
-        "subtle-destructive": "bg-destructive/10 text-destructive border-destructive/20 [a]:hover:bg-destructive/15";
-        "subtle-pill": "rounded-full bg-muted/70 text-muted-foreground border-border/80 font-medium";
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground";
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
-        subtle: "bg-primary/10 text-primary border-primary/20 [a]:hover:bg-primary/15";
-        "subtle-success": "bg-success/10 text-success border-success/20 [a]:hover:bg-success/15";
-        "subtle-warning": "bg-warning/10 text-warning border-warning/20 [a]:hover:bg-warning/15";
-        "subtle-destructive": "bg-destructive/10 text-destructive border-destructive/20 [a]:hover:bg-destructive/15";
-        "subtle-pill": "rounded-full bg-muted/70 text-muted-foreground border-border/80 font-medium";
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground";
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-}, undefined>>;
-export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+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 { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -10,9 +10,9 @@
   role="presentation"
   aria-hidden="true"
   data-slot="breadcrumb-ellipsis"
-  class={cn("flex size-9 items-center justify-center", className)}
+  class={cn("svadmin-breadcrumb-ellipsis", className)}
   {...restProps}
 >
-  <Ellipsis class="size-4" />
-  <span class="sr-only">More</span>
+  <Ellipsis class="svadmin-breadcrumb-icon" />
+  <span class="svadmin-sr-only">More</span>
 </span>

package/dist/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -8,7 +8,7 @@
 
 <li
   data-slot="breadcrumb-item"
-  class={cn("inline-flex items-center gap-1.5", className)}
+  class={cn("svadmin-breadcrumb-item", className)}
   {...restProps}
 >
   {@render children?.()}

package/dist/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -8,7 +8,7 @@
 
 <a
   data-slot="breadcrumb-link"
-  class={cn("hover:text-foreground transition-colors", className)}
+  class={cn("svadmin-breadcrumb-link", className)}
   {...restProps}
 >
   {@render children?.()}

package/dist/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -8,7 +8,7 @@
 
 <ol
   data-slot="breadcrumb-list"
-  class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5", className)}
+  class={cn("svadmin-breadcrumb-list", className)}
   {...restProps}
 >
   {@render children?.()}

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -11,7 +11,7 @@
   aria-disabled="true"
   aria-current="page"
   data-slot="breadcrumb-page"
-  class={cn("text-foreground font-normal", className)}
+  class={cn("svadmin-breadcrumb-page", className)}
   {...restProps}
 >
   {@render children?.()}

package/dist/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -11,12 +11,12 @@
   role="presentation"
   aria-hidden="true"
   data-slot="breadcrumb-separator"
-  class={cn("[&>svg]:size-3.5", className)}
+  class={cn("svadmin-breadcrumb-separator", className)}
   {...restProps}
 >
   {#if children}
     {@render children()}
   {:else}
-    <ChevronRight />
+    <ChevronRight class="svadmin-breadcrumb-icon" />
   {/if}
 </li>

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

@@ -0,0 +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";
+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];
+}) => string;
+import { clsx } from "cn/engine";

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

@@ -0,0 +1,3 @@
+// 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";

package/dist/components/ui/button/button.svelte

@@ -1,38 +1,15 @@
 <script lang="ts" module>
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+	import {
+		buttonVariants as variants,
+		type ButtonSize as Size,
+		type ButtonVariant as Variant,
+	} from "./button-variants.js";
 
-	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/80",
-				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-				sm: "h-8 gap-1 rounded-[min(var(--radius-md),12px)] px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
-				lg: "h-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5",
-				icon: "size-9",
-				"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-				"icon-sm": "size-8 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-				"icon-lg": "size-10",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
-
-	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+	export const buttonVariants = variants;
+	export type ButtonSize = Size;
+	export type ButtonVariant = Variant;
 
 	export type ButtonProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> &
 		WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {
@@ -68,6 +45,8 @@
 	<a
 		bind:this={anchorRef}
 		data-slot="button"
+		data-variant={variant}
+		data-size={size}
 		class={cn(buttonVariants({ variant, size }), className)}
 		href={disabled ? undefined : href}
 		aria-disabled={disabled}
@@ -81,6 +60,8 @@
 	<button
 		bind:this={buttonRef}
 		data-slot="button"
+		data-variant={variant}
+		data-size={size}
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		{disabled}