@svadmin/ui 0.38.7 → 0.40.0

package/dist/components/profile/PublicProfilePage.svelte

@@ -7,6 +7,7 @@
   import ProjectsGrid from './ProjectsGrid.svelte';
   import ActivityTimeline from './ActivityTimeline.svelte';
   import TeamsShowcase from './TeamsShowcase.svelte';
+  import ProfileVariantSections from './ProfileVariantSections.svelte';
   import { MapPin, Link, Calendar, MoreHorizontal } from '@lucide/svelte';
 
   const i18n = useTranslation();
@@ -18,9 +19,10 @@
     variant?: ProfileVariant;
     initialTab?: ProfileTab;
     columns?: 2 | 3;
+    showSections?: boolean;
   }
 
-  let { variant = 'default', initialTab = 'projects', columns = 2 }: Props = $props();
+  let { variant = 'default', initialTab = 'projects', columns = 2, showSections = false }: Props = $props();
   let activeTab = $derived<ProfileTab>(initialTab);
 
   // Demo profile data based on variant
@@ -84,6 +86,14 @@
     { id: '2', name: 'API Gateway v2', description: 'High-performance API gateway with rate limiting and circuit breaker patterns.', members: 5, tasks: 21, status: 'active' as const, tags: ['Backend', 'Infra'] },
     { id: '3', name: 'Mobile App', description: 'Cross-platform mobile application built with React Native.', members: 12, tasks: 56, status: 'completed' as const, tags: ['Mobile', 'React'] },
     { id: '4', name: 'Data Pipeline', description: 'Real-time data processing pipeline for event streaming.', members: 3, tasks: 18, status: 'on-hold' as const, tags: ['Data', 'Streaming'] },
+    { id: '5', name: 'Design System 2.0', description: 'Unified component library with tokens, theming, and accessibility built in.', members: 6, tasks: 42, status: 'active' as const, tags: ['Design', 'UI'] },
+    { id: '6', name: 'Billing Platform', description: 'Subscription billing with usage-based metering and invoicing.', members: 4, tasks: 27, status: 'active' as const, tags: ['Fintech', 'Backend'] },
+    { id: '7', name: 'Search Relevance', description: 'Ranking improvements and vector search for the product catalog.', members: 5, tasks: 19, status: 'on-hold' as const, tags: ['Search', 'ML'] },
+    { id: '8', name: 'Customer Portal', description: 'Self-service portal for account management and support tickets.', members: 9, tasks: 63, status: 'active' as const, tags: ['Web', 'Support'] },
+    { id: '9', name: 'Notification Hub', description: 'Multi-channel notification delivery with user preference controls.', members: 3, tasks: 15, status: 'completed' as const, tags: ['Infra', 'Messaging'] },
+    { id: '10', name: 'Analytics SDK', description: 'Lightweight event tracking SDK for web and mobile clients.', members: 4, tasks: 22, status: 'active' as const, tags: ['Analytics', 'SDK'] },
+    { id: '11', name: 'Docs Revamp', description: 'New documentation site with interactive examples and search.', members: 2, tasks: 31, status: 'completed' as const, tags: ['Docs', 'Content'] },
+    { id: '12', name: 'Edge Cache Layer', description: 'Distributed caching layer to cut origin latency for global users.', members: 5, tasks: 17, status: 'on-hold' as const, tags: ['Infra', 'Performance'] },
   ];
 
   const demoActivities = [
@@ -95,27 +105,33 @@
   ];
 
   const demoTeams = [
-    { id: '1', name: 'Frontend Platform', description: 'Building the core UI component library and design system.', members: [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }], totalMembers: 8, color: '#3b82f6' },
-    { id: '2', name: 'Backend Services', description: 'API development, microservices architecture, and infrastructure.', members: [{ name: 'Dave' }, { name: 'Eve' }], totalMembers: 5, color: '#10b981' },
-    { id: '3', name: 'Design', description: 'User experience research and visual design.', members: [{ name: 'Frank' }, { name: 'Grace' }, { name: 'Hank' }, { name: 'Ivy' }], totalMembers: 6, color: '#f59e0b' },
+    { id: '1', name: 'Frontend Platform', description: 'Building the core UI component library and design system.', members: [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }], totalMembers: 8, rating: 4.8, color: '#3b82f6' },
+    { id: '2', name: 'Backend Services', description: 'API development, microservices architecture, and infrastructure.', members: [{ name: 'Dave' }, { name: 'Eve' }], totalMembers: 5, rating: 4.5, color: '#10b981' },
+    { id: '3', name: 'Design', description: 'User experience research and visual design.', members: [{ name: 'Frank' }, { name: 'Grace' }, { name: 'Hank' }, { name: 'Ivy' }], totalMembers: 6, rating: 4.9, color: '#f59e0b' },
+    { id: '4', name: 'DevOps', description: 'CI/CD pipelines, cloud infrastructure, and reliability engineering.', members: [{ name: 'Jack' }, { name: 'Karen' }], totalMembers: 4, rating: 4.3, color: '#8b5cf6' },
+    { id: '5', name: 'Data Engineering', description: 'Data pipelines, warehousing, and analytics infrastructure.', members: [{ name: 'Leo' }, { name: 'Mona' }, { name: 'Nina' }], totalMembers: 7, rating: 4.6, color: '#ec4899' },
+    { id: '6', name: 'Mobile', description: 'iOS and Android apps with shared native modules.', members: [{ name: 'Oscar' }, { name: 'Paula' }], totalMembers: 5, rating: 4.4, color: '#14b8a6' },
+    { id: '7', name: 'QA & Release', description: 'Test automation, release management, and quality gates.', members: [{ name: 'Quinn' }, { name: 'Rosa' }, { name: 'Sam' }], totalMembers: 4, rating: 4.2, color: '#f97316' },
+    { id: '8', name: 'Security', description: 'Application security, compliance, and incident response.', members: [{ name: 'Tina' }, { name: 'Umar' }], totalMembers: 3, rating: 4.7, color: '#ef4444' },
+    { id: '9', name: 'Developer Relations', description: 'Documentation, community programs, and developer outreach.', members: [{ name: 'Vera' }, { name: 'Will' }, { name: 'Xu' }], totalMembers: 6, rating: 4.5, color: '#0ea5e9' },
   ];
 </script>
 
 <div class="space-y-6" data-svadmin-content-page="public-profile">
   <!-- Cover + Profile Header -->
   <Card.Card class="overflow-hidden border-border/60">
-    <div class="h-40 bg-gradient-to-r from-primary/25 via-primary/15 to-accent/20 relative">
+    <div class="h-28 bg-gradient-to-r from-primary/25 via-primary/15 to-accent/20 relative sm:h-40">
       <div class="absolute inset-0 opacity-[0.06]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 24px 24px;"></div>
     </div>
     <Card.CardContent class="relative px-6 pb-5">
-      <div class="-mt-12 flex flex-col sm:flex-row sm:items-end gap-4">
+      <div class="-mt-10 flex flex-col gap-3 sm:-mt-12 sm:flex-row sm:items-end sm:gap-4">
         <div class="ring-4 ring-card rounded-2xl overflow-hidden shrink-0">
-          <div class="flex h-24 w-24 items-center justify-center bg-primary/10 text-primary text-3xl font-bold">
+          <div class="flex h-20 w-20 items-center justify-center bg-primary/10 text-2xl font-bold text-primary sm:h-24 sm:w-24 sm:text-3xl">
             {profileData.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
           </div>
         </div>
         <div class="flex-1 min-w-0">
-          <h2 class="text-2xl font-bold text-foreground">{profileData.name}</h2>
+          <h2 class="text-xl font-bold text-foreground sm:text-2xl">{profileData.name}</h2>
           {#if profileData.tagline}
             <p class="text-muted-foreground">{profileData.tagline}</p>
           {/if}
@@ -131,7 +147,7 @@
             {/if}
           </div>
         </div>
-        <div class="flex gap-2 shrink-0">
+        <div class="flex shrink-0 flex-wrap gap-2">
           <Button size="sm">{i18n.t('publicProfile.editProfile')}</Button>
           <Button size="sm" variant="outline">{i18n.t('publicProfile.sendMessage')}</Button>
           <Button size="sm" variant="ghost"><MoreHorizontal class="h-4 w-4" /></Button>
@@ -161,21 +177,26 @@
     </Card.CardContent>
   </Card.Card>
 
-  <!-- Tabs: Projects / Activity / Teams -->
-  <Tabs.Root value={activeTab}>
-    <Tabs.List class="w-full justify-start border-b">
-      <Tabs.Trigger value="projects" active={activeTab === 'projects'} onclick={() => activeTab = 'projects'} class="gap-1.5">{i18n.t('publicProfile.projects')}</Tabs.Trigger>
-      <Tabs.Trigger value="activity" active={activeTab === 'activity'} onclick={() => activeTab = 'activity'} class="gap-1.5">{i18n.t('publicProfile.activity')}</Tabs.Trigger>
-      <Tabs.Trigger value="teams" active={activeTab === 'teams'} onclick={() => activeTab = 'teams'} class="gap-1.5">{i18n.t('publicProfile.teams')}</Tabs.Trigger>
-    </Tabs.List>
-    <Tabs.Content value="projects" active={activeTab === 'projects'} class="mt-4">
-      <ProjectsGrid {columns} projects={demoProjects} />
-    </Tabs.Content>
-    <Tabs.Content value="activity" active={activeTab === 'activity'} class="mt-4">
-      <ActivityTimeline activities={demoActivities} />
-    </Tabs.Content>
-    <Tabs.Content value="teams" active={activeTab === 'teams'} class="mt-4">
-      <TeamsShowcase teams={demoTeams} />
-    </Tabs.Content>
-  </Tabs.Root>
+  <!-- Variant-specific sections (About / Projects table / Jobs / Games ...) -->
+  {#if showSections}
+    <ProfileVariantSections {variant} />
+  {:else}
+    <!-- Tabs: Projects / Activity / Teams -->
+    <Tabs.Root value={activeTab}>
+      <Tabs.List class="w-full justify-start border-b">
+        <Tabs.Trigger value="projects" active={activeTab === 'projects'} onclick={() => activeTab = 'projects'} class="gap-1.5">{i18n.t('publicProfile.projects')}</Tabs.Trigger>
+        <Tabs.Trigger value="activity" active={activeTab === 'activity'} onclick={() => activeTab = 'activity'} class="gap-1.5">{i18n.t('publicProfile.activity')}</Tabs.Trigger>
+        <Tabs.Trigger value="teams" active={activeTab === 'teams'} onclick={() => activeTab = 'teams'} class="gap-1.5">{i18n.t('publicProfile.teams')}</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="projects" active={activeTab === 'projects'} class="mt-4">
+        <ProjectsGrid {columns} projects={columns === 3 ? demoProjects : demoProjects.slice(0, 6)} />
+      </Tabs.Content>
+      <Tabs.Content value="activity" active={activeTab === 'activity'} class="mt-4">
+        <ActivityTimeline activities={demoActivities} />
+      </Tabs.Content>
+      <Tabs.Content value="teams" active={activeTab === 'teams'} class="mt-4">
+        <TeamsShowcase teams={demoTeams} />
+      </Tabs.Content>
+    </Tabs.Root>
+  {/if}
 </div>

package/dist/components/profile/PublicProfilePage.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     variant?: ProfileVariant;
     initialTab?: ProfileTab;
     columns?: 2 | 3;
+    showSections?: boolean;
 }
 declare const PublicProfilePage: import("svelte").Component<Props, {}, "">;
 type PublicProfilePage = ReturnType<typeof PublicProfilePage>;

package/dist/components/profile/TeamsShowcase.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
-  import { Badge } from '../ui/badge/index.js';
   import { Button } from '../ui/button/index.js';
   import { Avatar } from '../ui/avatar/index.js';
-  import { Users, ArrowRight } from '@lucide/svelte';
+  import { Input } from '../ui/input/index.js';
+  import { Users, ArrowRight, Search, Star } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -21,6 +21,7 @@
     members: TeamMember[];
     totalMembers: number;
     color?: string;
+    rating?: number;
   }
 
   interface Props {
@@ -29,19 +30,32 @@
 
   let { teams = [] }: Props = $props();
 
+  let searchQuery = $state('');
+  const filtered = $derived(
+    searchQuery
+      ? teams.filter(t => t.name.toLowerCase().includes(searchQuery.toLowerCase()) || t.description.toLowerCase().includes(searchQuery.toLowerCase()))
+      : teams
+  );
+
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 </script>
 
 <div class="space-y-4">
-  <h3 class="text-lg font-semibold text-foreground">{i18n.t('publicProfile.teams')}</h3>
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <h3 class="text-lg font-semibold text-foreground">{i18n.t('publicProfile.teamsCount', { count: filtered.length })}</h3>
+    <div class="relative">
+      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Input placeholder={i18n.t('publicProfile.searchTeams')} bind:value={searchQuery} class="w-48 pl-9" />
+    </div>
+  </div>
 
-  {#if teams.length === 0}
+  {#if filtered.length === 0}
     <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
       <p class="text-sm text-muted-foreground">{i18n.t('publicProfile.noTeams')}</p>
     </div>
   {:else}
-    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
-      {#each teams as team (team.id)}
+    <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      {#each filtered as team (team.id)}
         <Card.Card class="border-border/60 hover:border-primary/30 transition-colors">
           <Card.CardContent class="p-4 space-y-3">
             <div class="flex items-start justify-between gap-2">
@@ -57,12 +71,14 @@
                 {/if}
                 <div>
                   <h4 class="font-semibold text-foreground">{team.name}</h4>
-                  <p class="text-xs text-muted-foreground">{team.totalMembers} {i18n.t('publicProfile.projectMembers', { count: team.totalMembers })}</p>
+                  <p class="text-xs text-muted-foreground">{i18n.t('publicProfile.projectMembers', { count: team.totalMembers })}</p>
                 </div>
               </div>
-              <Badge variant="secondary" class="shrink-0">
-                <Users class="h-3 w-3 mr-1" />{team.totalMembers}
-              </Badge>
+              {#if team.rating}
+                <span class="flex shrink-0 items-center gap-1 text-xs font-semibold text-amber-500">
+                  <Star class="h-3.5 w-3.5 fill-amber-400 text-amber-400" />{team.rating}
+                </span>
+              {/if}
             </div>
 
             <p class="text-sm text-muted-foreground line-clamp-2">{team.description}</p>
@@ -87,8 +103,11 @@
               {/if}
             </div>
 
-            <div class="pt-2 border-t">
-              <Button variant="ghost" size="sm" class="w-full">
+            <div class="flex gap-2 pt-2 border-t">
+              <Button variant="outline" size="sm" class="flex-1">
+                {i18n.t('publicProfile.join')}
+              </Button>
+              <Button variant="ghost" size="sm" class="flex-1">
                 {i18n.t('publicProfile.viewProfile')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
               </Button>
             </div>

package/dist/components/profile/TeamsShowcase.svelte.d.ts

@@ -10,6 +10,7 @@ interface Team {
     members: TeamMember[];
     totalMembers: number;
     color?: string;
+    rating?: number;
 }
 interface Props {
     teams?: Team[];

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

@@ -3,26 +3,26 @@ import type { HTMLAttributes } from "svelte/elements";
 import { type VariantProps } from "tailwind-variants";
 export declare const alertVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        warning: string;
-        success: string;
+        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: string;
-        destructive: string;
-        warning: string;
-        success: string;
+        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").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
-        warning: string;
-        success: string;
+        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", unknown, unknown, undefined>>;
+}, undefined>>;
 export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
 type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: AlertVariant;

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

@@ -7,26 +7,26 @@ declare const Avatar: import("svelte").Component<HTMLImgAttributes & {
 }, {
     avatarVariants: import("tailwind-variants").TVReturnType<{
         size: {
-            default: string;
-            sm: string;
-            lg: string;
-            xl: string;
+            default: "size-10";
+            sm: "size-8";
+            lg: "size-12";
+            xl: "size-16";
         };
     }, undefined, "relative flex shrink-0 overflow-hidden rounded-full", {
         size: {
-            default: string;
-            sm: string;
-            lg: string;
-            xl: string;
+            default: "size-10";
+            sm: "size-8";
+            lg: "size-12";
+            xl: "size-16";
         };
-    }, undefined, import("tailwind-variants").TVReturnType<{
+    }, undefined, import("tailwind-variants").TVReturnTypeLike<{
         size: {
-            default: string;
-            sm: string;
-            lg: string;
-            xl: string;
+            default: "size-10";
+            sm: "size-8";
+            lg: "size-12";
+            xl: "size-16";
         };
-    }, undefined, "relative flex shrink-0 overflow-hidden rounded-full", unknown, unknown, undefined>>;
+    }, undefined>>;
 }, "ref">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

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

@@ -1,32 +1,32 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
+        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";
+        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: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
+        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";
+        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").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
+        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";
+        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", unknown, unknown, undefined>>;
+}, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
 import type { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";

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

@@ -3,62 +3,62 @@ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements
 import { type VariantProps } from "tailwind-variants";
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        destructive: string;
-        link: string;
+        default: "bg-primary text-primary-foreground [a]: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: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-xs": string;
-        "icon-sm": string;
-        "icon-lg": string;
+        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";
     };
 }, undefined, "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", {
     variant: {
-        default: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        destructive: string;
-        link: string;
+        default: "bg-primary text-primary-foreground [a]: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: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-xs": string;
-        "icon-sm": string;
-        "icon-lg": string;
+        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";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        destructive: string;
-        link: string;
+        default: "bg-primary text-primary-foreground [a]: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: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-xs": string;
-        "icon-sm": string;
-        "icon-lg": string;
+        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";
     };
-}, undefined, "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", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
 export { default as Sidebar } from './components/Sidebar.svelte';
 export { default as Layout } from './components/Layout.svelte';
 export { default as Header } from './components/Header.svelte';
+export { default as SvadminLogo } from './components/SvadminLogo.svelte';
 export { default as ErrorBoundary } from './components/ErrorBoundary.svelte';
 export { default as Toast } from './components/Toast.svelte';
 export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
@@ -136,7 +137,9 @@ export { default as ProjectsGrid } from './components/profile/ProjectsGrid.svelt
 export { default as ActivityTimeline } from './components/profile/ActivityTimeline.svelte';
 export { default as TeamsShowcase } from './components/profile/TeamsShowcase.svelte';
 export { default as PublicProfilePage } from './components/profile/PublicProfilePage.svelte';
+export { default as ProfileVariantSections } from './components/profile/ProfileVariantSections.svelte';
 export { default as GetStartedPage } from './components/account/GetStartedPage.svelte';
+export { default as UserProfilePage } from './components/account/UserProfilePage.svelte';
 export { default as CompanyProfilePage } from './components/account/CompanyProfilePage.svelte';
 export { default as SettingsPlainPage } from './components/account/SettingsPlainPage.svelte';
 export { default as SettingsSidebarPage } from './components/account/SettingsSidebarPage.svelte';

package/dist/index.js

@@ -9,6 +9,7 @@ export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
 export { default as Sidebar } from './components/Sidebar.svelte';
 export { default as Layout } from './components/Layout.svelte';
 export { default as Header } from './components/Header.svelte';
+export { default as SvadminLogo } from './components/SvadminLogo.svelte';
 export { default as ErrorBoundary } from './components/ErrorBoundary.svelte';
 export { default as Toast } from './components/Toast.svelte';
 export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
@@ -148,8 +149,10 @@ export { default as ProjectsGrid } from './components/profile/ProjectsGrid.svelt
 export { default as ActivityTimeline } from './components/profile/ActivityTimeline.svelte';
 export { default as TeamsShowcase } from './components/profile/TeamsShowcase.svelte';
 export { default as PublicProfilePage } from './components/profile/PublicProfilePage.svelte';
+export { default as ProfileVariantSections } from './components/profile/ProfileVariantSections.svelte';
 // Account extensions
 export { default as GetStartedPage } from './components/account/GetStartedPage.svelte';
+export { default as UserProfilePage } from './components/account/UserProfilePage.svelte';
 export { default as CompanyProfilePage } from './components/account/CompanyProfilePage.svelte';
 export { default as SettingsPlainPage } from './components/account/SettingsPlainPage.svelte';
 export { default as SettingsSidebarPage } from './components/account/SettingsSidebarPage.svelte';

package/dist/router-state.svelte.js

@@ -7,6 +7,10 @@ const ROUTES = [
     '/update-password',
     '/2fa',
     '/authentication/branded/2fa',
+    '/authentication/error-404',
+    '/authentication/error-500',
+    '/404',
+    '/500',
     '/settings',
     '/settings/:tab',
     '/',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.38.7",
+  "version": "0.40.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,13 +39,13 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.32.2",
-    "@tanstack/svelte-query": "^6.1.29",
+    "@svadmin/core": "^0.34.0",
+    "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
-    "isomorphic-dompurify": "^3.15.0",
-    "marked": "^18.0.0",
-    "marked-highlight": "^2.2.3",
-    "svelte": "^5.33.0"
+    "isomorphic-dompurify": "^3.20.0",
+    "marked": "^18.0.7",
+    "marked-highlight": "^2.2.4",
+    "svelte": "^5.56.8"
   },
   "peerDependenciesMeta": {
     "marked": {
@@ -75,15 +75,15 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@lucide/svelte": "^1.25.0",
+    "@lucide/svelte": "^1.28.0",
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/svelte-table": "9.0.0-alpha.53",
-    "@tanstack/table-core": "9.0.0-alpha.53",
+    "@tanstack/svelte-table": "9.0.0",
+    "@tanstack/table-core": "9.0.0",
     "bits-ui": "^2.18.1",
     "clsx": "^2.1.1",
     "svelte-sonner": "^1.1.1",
     "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.2.2"
+    "tailwind-variants": "^3.3.0"
   },
   "license": "MIT",
   "author": "zuohuadong",
@@ -97,16 +97,16 @@
     "url": "https://github.com/zuohuadong/svadmin/issues"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.11.0",
+    "@happy-dom/global-registrator": "^20.11.1",
     "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/svelte": "^5.4.2",
     "@testing-library/user-event": "^14.6.1",
-    "happy-dom": "^20.11.0",
-    "vitest": "^4.1.8"
+    "happy-dom": "^20.11.1",
+    "vitest": "^4.1.10"
   },
   "scripts": {
-    "build": "svelte-package -i src -o dist && node scripts/postbuild-css.mjs",
+    "build": "node ../../node_modules/@sveltejs/package/svelte-package.js -i src -o dist && node scripts/postbuild-css.mjs",
     "test": "vitest run --config ./vitest.config.ts"
   }
 }