@svadmin/ui 0.34.10 → 0.36.0

package/dist/components/LoginPage.svelte

@@ -5,44 +5,46 @@
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Label } from './ui/label/index.js';
-  import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
   import { Separator } from './ui/separator/index.js';
-  import { LogIn, User, Loader2, AlertCircle } from '@lucide/svelte';
-
-  /**
-   * Social provider config for the login page.
-   * Each entry renders a button that calls `onClick()` when clicked.
-   *
-   * @example
-   * ```ts
-   * const socialProviders = [
-   *   { name: 'Google', icon: '🔵', onClick: () => googleAuth.login({}) },
-   *   { name: 'GitHub', icon: '🐙', onClick: () => githubAuth.login({}) },
-   * ];
-   * ```
-   */
+  import { User, Loader2, AlertCircle, Shield } from '@lucide/svelte';
+
   interface SocialProvider {
-    /** Display name (e.g., 'Google') */
     name: string;
-    /** Icon character, emoji, or SVG string */
     icon?: string;
-    /** Handler to initiate social login */
     onClick: () => void | Promise<void>;
   }
 
-  let { title = 'Admin', onSuccess, socialProviders = [] } = $props<{
+  let {
+    title = 'Admin',
+    onSuccess,
+    socialProviders = [],
+    defaultIdentifier = '',
+    defaultPassword = '',
+    loginHint,
+  } = $props<{
     title?: string;
     onSuccess?: () => void;
     socialProviders?: SocialProvider[];
+    defaultIdentifier?: string;
+    defaultPassword?: string;
+    loginHint?: string;
   }>();
 
   const login = useLogin({ errorMessage: false });
   const authProvider = getAuthProvider();
 
-  let identifier = $state('');
-  let password = $state('');
+  function getInitialIdentifier() {
+    return defaultIdentifier;
+  }
+
+  function getInitialPassword() {
+    return defaultPassword;
+  }
+
+  let identifier = $state(getInitialIdentifier());
+  let password = $state(getInitialPassword());
   let error = $state('');
 
   async function handleSubmit(e: Event) {
@@ -61,103 +63,203 @@
   }
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-100 via-blue-50/30 to-indigo-50/40 dark:from-slate-950 dark:via-slate-900 dark:to-indigo-950/20 p-4">
-  <div class="w-full max-w-[380px]">
-    <Card.Card>
-      <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
-          <LogIn class="h-5 w-5" />
+<div class="min-h-screen flex flex-col lg:flex-row">
+  <div class="hidden lg:flex lg:w-[500px] xl:w-[560px] relative overflow-hidden bg-gradient-to-br from-primary/95 via-primary to-primary/85 shrink-0">
+    <div class="absolute inset-0">
+      <div class="absolute top-[12%] left-[8%] h-32 w-32 rounded-3xl border border-white/10 bg-white/5 rotate-12 backdrop-blur-sm"></div>
+      <div class="absolute top-[54%] left-[54%] h-44 w-44 rounded-full border border-white/10 bg-white/5 -rotate-6 backdrop-blur-sm"></div>
+      <div class="absolute bottom-[14%] left-[13%] h-28 w-28 rounded-2xl border border-white/10 bg-white/5 -rotate-12 backdrop-blur-sm"></div>
+      <div class="absolute top-[30%] right-[10%] h-20 w-20 rounded-xl border border-white/10 bg-white/5 rotate-45 backdrop-blur-sm"></div>
+      <div class="absolute inset-0 opacity-[0.04]" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 24px 24px;"></div>
+    </div>
+
+    <div class="relative z-10 flex flex-col justify-between p-10 xl:p-12 w-full">
+      <div class="flex items-center gap-3">
+        <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-white/15 backdrop-blur-sm">
+          <Shield class="h-5 w-5 text-white" />
         </div>
-        <Card.CardTitle class="text-xl">{t('auth.welcomeBack')}</Card.CardTitle>
-        <p class="text-sm text-muted-foreground">{t('auth.welcomeMessage')}</p>
-      </Card.CardHeader>
-      <Card.CardContent>
-        <form onsubmit={handleSubmit} class="space-y-4">
-          {#if error}
-            <Alert.Root variant="destructive">
-              <AlertCircle class="h-4 w-4" />
-              <Alert.Description>{error}</Alert.Description>
-            </Alert.Root>
-          {/if}
+        <span class="text-xl font-semibold text-white tracking-tight">{title}</span>
+      </div>
+
+      <div class="max-w-[360px] space-y-4">
+        <h2 class="text-4xl font-bold text-white leading-tight">
+          {t('auth.welcomeBack')}
+        </h2>
+        <p class="text-lg text-white/75 leading-relaxed">
+          {t('auth.welcomeMessage')}
+        </p>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <div class="h-1.5 w-10 rounded-full bg-white/40"></div>
+        <div class="h-1.5 w-5 rounded-full bg-white/20"></div>
+        <div class="h-1.5 w-2 rounded-full bg-white/15"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex-1 flex items-center justify-center bg-background p-6 sm:p-10 lg:p-14">
+    <div class="w-full max-w-[460px] space-y-8">
+      <div class="flex items-center gap-3 mb-8 lg:hidden">
+        <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          <Shield class="h-5 w-5" />
+        </div>
+        <span class="text-xl font-semibold tracking-tight text-foreground">{title}</span>
+      </div>
+
+      <div class="space-y-2.5">
+        <h1 class="text-3xl font-semibold tracking-tight text-foreground">
+          {t('auth.welcomeBack')}
+        </h1>
+        <p class="text-base text-muted-foreground leading-relaxed">
+          {t('auth.welcomeMessage')}
+        </p>
+      </div>
 
-          <div class="space-y-2">
-            <Label for="login-identifier">{t('auth.usernameOrEmail')}</Label>
-            <div class="relative">
-              <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
-              <Input
-                id="login-identifier"
-                type="text"
-                placeholder={t('auth.identifierPlaceholder')}
-                bind:value={identifier}
-                class="pl-9"
-                autocomplete="username"
-              />
-            </div>
+      {#if loginHint || defaultIdentifier || defaultPassword}
+        <div class="rounded-2xl border border-primary/15 bg-primary/[0.06] p-4 shadow-sm">
+          {#if loginHint}
+            <p class="text-sm font-medium text-primary">{loginHint}</p>
+          {/if}
+          <div class="mt-3 grid gap-2 sm:grid-cols-2">
+            {#if defaultIdentifier}
+              <div class="rounded-xl border border-border/70 bg-background/80 px-3 py-2">
+                <p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  {t('auth.usernameOrEmail')}
+                </p>
+                <p class="mt-1 font-mono text-sm font-semibold text-foreground">{defaultIdentifier}</p>
+              </div>
+            {/if}
+            {#if defaultPassword}
+              <div class="rounded-xl border border-border/70 bg-background/80 px-3 py-2">
+                <p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  {t('auth.password')}
+                </p>
+                <p class="mt-1 font-mono text-sm font-semibold text-foreground">{defaultPassword}</p>
+              </div>
+            {/if}
           </div>
+        </div>
+      {/if}
 
-          <div>
-            <div class="flex items-center justify-between mb-2">
-              <Label for="login-password">{t('auth.password')}</Label>
-              {#if authProvider.forgotPassword}
-                <Button variant="link" class="text-xs h-auto p-0" onclick={() => navigate('/forgot-password')}>
-                  {t('auth.forgotPasswordLink')}
-                </Button>
-              {/if}
-            </div>
-            <PasswordInput
-              id="login-password"
-              label=""
-              bind:value={password}
-              autocomplete="current-password"
+      <form onsubmit={handleSubmit} class="space-y-6 login-form">
+        {#if error}
+          <Alert.Root variant="destructive" class="rounded-xl border border-destructive/20 bg-destructive/5">
+            <AlertCircle class="h-4 w-4" />
+            <Alert.Description class="text-sm font-medium">{error}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        <div class="space-y-2.5">
+          <Label for="login-identifier" class="text-sm font-semibold text-foreground/80 pl-0.5">
+            {t('auth.usernameOrEmail')}
+          </Label>
+          <div class="relative">
+            <User class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none z-[1]" />
+            <Input
+              id="login-identifier"
+              type="text"
+              placeholder={t('auth.identifierPlaceholder')}
+              bind:value={identifier}
+              class="pl-12"
+              autocomplete="username"
             />
           </div>
+        </div>
 
-          <Button type="submit" class="w-full" disabled={login.isLoading}>
-            {#if login.isLoading}
-              <Loader2 class="h-4 w-4 animate-spin mr-2" />
+        <div class="space-y-2.5">
+          <div class="flex items-center justify-between pl-0.5">
+            <Label for="login-password" class="text-sm font-semibold text-foreground/80">
+              {t('auth.password')}
+            </Label>
+            {#if authProvider.forgotPassword}
+              <Button variant="link" class="text-xs h-auto p-0 font-medium hover:text-primary transition-colors" onclick={() => navigate('/forgot-password')}>
+                {t('auth.forgotPasswordLink')}
+              </Button>
             {/if}
-            {t('auth.loginButton')}
-          </Button>
-        </form>
-
-        {#if socialProviders.length > 0}
-          <div class="relative my-5">
-            <Separator />
-            <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
-              {t('auth.orContinueWith')}
-            </span>
           </div>
+          <PasswordInput
+            id="login-password"
+            label=""
+            bind:value={password}
+            autocomplete="current-password"
+          />
+        </div>
 
-          <div class="grid gap-2" class:grid-cols-2={socialProviders.length >= 2}>
-            {#each socialProviders as provider (provider.name)}
-              <Button
-                variant="outline"
-                class="w-full"
-                onclick={provider.onClick}
-              >
-                {#if provider.icon}
-                  <span class="mr-2">{provider.icon}</span>
-                {/if}
-                {provider.name}
-              </Button>
-            {/each}
-          </div>
-        {/if}
+        <Button type="submit" class="w-full h-14 rounded-xl text-base font-semibold shadow-md shadow-primary/20 hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-[1px] active:translate-y-0 transition-all duration-200 mt-2" disabled={login.isLoading}>
+          {#if login.isLoading}
+            <Loader2 class="h-5 w-5 animate-spin mr-2" />
+          {/if}
+          {t('auth.loginButton')}
+        </Button>
+      </form>
 
-        {#if authProvider.register}
-          <div class="flex items-center justify-center gap-1 mt-5 pt-5 border-t">
-            <span class="text-sm text-muted-foreground">{t('auth.noAccount')}</span>
-            <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/register')}>
-              {t('auth.register')}
+      {#if socialProviders.length > 0}
+        <div class="relative my-8">
+          <Separator />
+          <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-4 text-xs font-semibold text-muted-foreground tracking-wider uppercase">
+            {t('auth.orContinueWith')}
+          </span>
+        </div>
+
+        <div class="grid gap-3" class:grid-cols-2={socialProviders.length >= 2}>
+          {#each socialProviders as provider (provider.name)}
+            <Button
+              variant="outline"
+              class="w-full h-12 rounded-xl font-semibold border-input/60 hover:bg-muted/50 hover:text-accent-foreground transition-all duration-200"
+              onclick={provider.onClick}
+            >
+              {#if provider.icon}
+                <span class="mr-2 text-lg">{provider.icon}</span>
+              {/if}
+              {provider.name}
             </Button>
-          </div>
-        {/if}
-      </Card.CardContent>
-    </Card.Card>
+          {/each}
+        </div>
+      {/if}
+
+      {#if authProvider.register}
+        <div class="flex items-center justify-center gap-1.5 mt-8 pt-6 border-t border-border/60">
+          <span class="text-sm text-muted-foreground">{t('auth.noAccount')}</span>
+          <Button variant="link" class="text-sm h-auto p-0 font-semibold text-primary hover:underline" onclick={() => navigate('/register')}>
+            {t('auth.register')}
+          </Button>
+        </div>
+      {/if}
 
-    <p class="text-xs text-muted-foreground mt-4 text-center">
-      Powered by {title}
-    </p>
+      <p class="text-xs text-muted-foreground/50 mt-8 text-center tracking-wide font-medium">
+        Powered by {title}
+      </p>
+    </div>
   </div>
 </div>
 
+<style>
+  .login-form :global(input[data-slot='input']) {
+    height: 3.5rem;
+    border-radius: 0.75rem;
+    border-color: color-mix(in oklch, var(--border) 88%, var(--foreground));
+    background-color: var(--background);
+    font-size: 0.975rem;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+  }
+
+  .login-form :global(input[data-slot='input']:focus-visible) {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
+  }
+
+  .login-form :global(.relative > svg:first-of-type) {
+    left: 1rem;
+    height: 1.25rem;
+    width: 1.25rem;
+    color: color-mix(in oklch, var(--muted-foreground) 82%, var(--foreground));
+  }
+
+  .login-form :global(.relative > button) {
+    right: 0.625rem;
+    height: 2.25rem;
+    width: 2.25rem;
+    border-radius: 0.5rem;
+  }
+</style>

package/dist/components/LoginPage.svelte.d.ts

@@ -1,27 +1,15 @@
-/**
- * Social provider config for the login page.
- * Each entry renders a button that calls `onClick()` when clicked.
- *
- * @example
- * ```ts
- * const socialProviders = [
- *   { name: 'Google', icon: '🔵', onClick: () => googleAuth.login({}) },
- *   { name: 'GitHub', icon: '🐙', onClick: () => githubAuth.login({}) },
- * ];
- * ```
- */
 interface SocialProvider {
-    /** Display name (e.g., 'Google') */
     name: string;
-    /** Icon character, emoji, or SVG string */
     icon?: string;
-    /** Handler to initiate social login */
     onClick: () => void | Promise<void>;
 }
 type $$ComponentProps = {
     title?: string;
     onSuccess?: () => void;
     socialProviders?: SocialProvider[];
+    defaultIdentifier?: string;
+    defaultPassword?: string;
+    loginHint?: string;
 };
 declare const LoginPage: import("svelte").Component<$$ComponentProps, {}, "">;
 type LoginPage = ReturnType<typeof LoginPage>;

package/dist/components/NotificationsSettings.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Bell, Mail, Smartphone } from '@lucide/svelte';
+  import * as Card from './ui/card/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Label } from './ui/label/index.js';
+  import { Switch } from './ui/switch/index.js';
+
+  let emailAlerts = $state({ security: true, activity: false, reports: true });
+  let pushAlerts = $state({ security: true, activity: true, reports: false });
+  let smsAlerts = $state({ security: true });
+  let isSaved = $state(false);
+
+  function saveSettings() {
+    isSaved = true;
+    setTimeout(() => {
+      isSaved = false;
+    }, 3000);
+  }
+</script>
+
+<div class="space-y-6">
+  <div class="flex flex-col justify-between gap-3 sm:flex-row sm:items-start">
+    <div>
+      <h2 class="text-xl font-semibold text-foreground">{t('settings.notifications')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('settings.notificationsDescription')}</p>
+    </div>
+    <Button onclick={saveSettings}>{isSaved ? t('common.autoSaved') : t('common.save')}</Button>
+  </div>
+
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Mail class="h-4 w-4 text-muted-foreground" />
+        {t('notifications.emailTitle')}
+      </Card.CardTitle>
+      <Card.CardDescription>{t('notifications.emailDescription')}</Card.CardDescription>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-4">
+      <div class="flex items-center justify-between gap-4 border-b py-2">
+        <div class="space-y-1">
+          <Label for="email-security">{t('notifications.securityAlerts')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.securityAlertsDesc')}</p>
+        </div>
+        <Switch id="email-security" bind:checked={emailAlerts.security} />
+      </div>
+      <div class="flex items-center justify-between gap-4 border-b py-2">
+        <div class="space-y-1">
+          <Label for="email-activity">{t('notifications.activityLogs')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.activityLogsDesc')}</p>
+        </div>
+        <Switch id="email-activity" bind:checked={emailAlerts.activity} />
+      </div>
+      <div class="flex items-center justify-between gap-4 py-2">
+        <div class="space-y-1">
+          <Label for="email-reports">{t('notifications.systemAlerts')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.systemAlertsDesc')}</p>
+        </div>
+        <Switch id="email-reports" bind:checked={emailAlerts.reports} />
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Bell class="h-4 w-4 text-muted-foreground" />
+        {t('notifications.pushTitle')}
+      </Card.CardTitle>
+      <Card.CardDescription>{t('notifications.pushDescription')}</Card.CardDescription>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-4">
+      <div class="flex items-center justify-between gap-4 border-b py-2">
+        <div class="space-y-1">
+          <Label for="push-security">{t('notifications.securityAlerts')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.securityPushDesc')}</p>
+        </div>
+        <Switch id="push-security" bind:checked={pushAlerts.security} />
+      </div>
+      <div class="flex items-center justify-between gap-4 border-b py-2">
+        <div class="space-y-1">
+          <Label for="push-activity">{t('notifications.activityLogs')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.activityPushDesc')}</p>
+        </div>
+        <Switch id="push-activity" bind:checked={pushAlerts.activity} />
+      </div>
+      <div class="flex items-center justify-between gap-4 py-2">
+        <div class="space-y-1">
+          <Label for="push-reports">{t('notifications.systemAlerts')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.systemPushDesc')}</p>
+        </div>
+        <Switch id="push-reports" bind:checked={pushAlerts.reports} />
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Smartphone class="h-4 w-4 text-muted-foreground" />
+        {t('notifications.smsTitle')}
+      </Card.CardTitle>
+      <Card.CardDescription>{t('notifications.smsDescription')}</Card.CardDescription>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex items-center justify-between gap-4 py-2">
+        <div class="space-y-1">
+          <Label for="sms-security">{t('notifications.criticalSecurity')}</Label>
+          <p class="text-xs text-muted-foreground">{t('notifications.criticalSecurityDesc')}</p>
+        </div>
+        <Switch id="sms-security" bind:checked={smsAlerts.security} />
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/dist/components/NotificationsSettings.svelte.d.ts

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

package/dist/components/PageHeader.svelte

@@ -19,19 +19,21 @@
   }: Props = $props();
 </script>
 
-<div class="space-y-4 {className}">
+<div class="border-b border-border/70 pb-5 {className}" data-svadmin-page-header>
   {#if showBreadcrumbs}
-    <Breadcrumbs />
+    <div class="mb-4">
+      <Breadcrumbs />
+    </div>
   {/if}
-  <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-    <div>
-      <h1 class="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
+  <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+    <div class="min-w-0">
+      <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
       {#if description}
-        <p class="text-sm text-muted-foreground">{description}</p>
+        <p class="mt-1 max-w-3xl text-sm text-muted-foreground">{description}</p>
       {/if}
     </div>
     {#if actions}
-      <div class="flex items-center gap-2">
+      <div class="flex w-full flex-wrap items-center gap-2 lg:w-auto lg:justify-end">
         {@render actions()}
       </div>
     {/if}