@svadmin/ui 0.29.0 → 0.29.2

package/src/components/ListPage.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-  import { getResource } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  import { t } from '@svadmin/core/i18n';
-  import type { Snippet } from 'svelte';
-  import type { FieldDefinition } from '@svadmin/core';
-  import PageHeader from './PageHeader.svelte';
-  import AutoTable from './AutoTable.svelte';
-  import { Button } from './ui/button/index.js';
-  import { Plus } from '@lucide/svelte';
-
-  interface Props {
-    resourceName: string;
-    title?: string;
-    canCreate?: boolean;
-    /** Passthrough: enable row selection checkboxes */
-    selectable?: boolean;
-    /** Passthrough: custom header actions */
-    headerActions?: Snippet;
-    /** Passthrough: custom cell renderer per field */
-    cellRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; record: Record<string, unknown> }]>;
-    /** Passthrough: custom row actions */
-    rowActions?: Snippet<[{ record: Record<string, unknown>; id: string | number }]>;
-    /** Passthrough: custom empty state */
-    emptyState?: Snippet;
-    /** Passthrough: expandable row content */
-    expandedRowRender?: Snippet<[{ record: Record<string, unknown> }]>;
-    class?: string;
-  }
-
-  let {
-    resourceName,
-    title,
-    canCreate,
-    selectable,
-    headerActions,
-    cellRenderer,
-    rowActions,
-    emptyState,
-    expandedRowRender,
-    class: className = '',
-  }: Props = $props();
-
-  const resource = $derived(getResource(resourceName));
-  const pageTitle = $derived(title ?? resource.label);
-  const showCreate = $derived(canCreate ?? resource.canCreate !== false);
-</script>
-
-<div class="space-y-6 {className}">
-  <PageHeader title={pageTitle}>
-    {#snippet actions()}
-      {#if showCreate}
-        <Button onclick={() => navigate(`/${resourceName}/create`)}>
-          <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
-        </Button>
-      {/if}
-      {#if headerActions}
-        {@render headerActions()}
-      {/if}
-    {/snippet}
-  </PageHeader>
-
-  <AutoTable
-    {resourceName}
-    {selectable}
-    defaultCellRenderer={cellRenderer}
-    {rowActions}
-    {emptyState}
-    {expandedRowRender}
-  />
-</div>

package/src/components/LiveIndicator.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { Wifi, WifiOff, Loader2 } from '@lucide/svelte';
-  import { Badge } from './ui/badge/index.js';
-
-  let {
-    status = 'disconnected',
-    resource = '',
-    lastEvent = null,
-    showDetails = false,
-  } = $props<{
-    status: 'connecting' | 'connected' | 'disconnected';
-    resource?: string;
-    lastEvent?: { type: string; timestamp?: number } | null;
-    showDetails?: boolean;
-  }>();
-
-  const statusConfigs = {
-    connected: { variant: 'default' as const, dotClass: 'bg-success', label: 'Live', icon: Wifi },
-    connecting: { variant: 'secondary' as const, dotClass: 'bg-warning', label: 'Connecting...', icon: Loader2 as typeof Wifi },
-    disconnected: { variant: 'destructive' as const, dotClass: 'bg-destructive', label: 'Offline', icon: WifiOff },
-  } as const;
-  type StatusKey = 'connected' | 'connecting' | 'disconnected';
-  const cfg = $derived(statusConfigs[status as StatusKey]);
-
-  const timeSinceEvent = $derived(
-    lastEvent?.timestamp
-      ? Math.floor((Date.now() - lastEvent.timestamp) / 1000)
-      : null
-  );
-</script>
-
-{#key status}
-  <div transition:fade={{ duration: 200 }}>
-    <Badge variant={cfg.variant} class="gap-1.5 select-none" title={cfg.label}>
-      <span class="relative flex h-2 w-2">
-        <span class="{cfg.dotClass} rounded-full h-2 w-2"></span>
-        {#if status === 'connected'}
-          <span class="absolute inset-0 rounded-full {cfg.dotClass} opacity-40 animate-ping"></span>
-        {/if}
-      </span>
-      <span class="text-[0.6875rem] font-semibold uppercase tracking-wide">{cfg.label}</span>
-
-      {#if showDetails && resource}
-        <span class="text-[0.625rem] font-mono opacity-70">{resource}</span>
-      {/if}
-
-      {#if showDetails && lastEvent}
-        <span class="text-[0.625rem] opacity-70">
-          {lastEvent.type}
-          {#if timeSinceEvent !== null && timeSinceEvent < 60}
-            <span class="opacity-60">{timeSinceEvent}s ago</span>
-          {/if}
-        </span>
-      {/if}
-    </Badge>
-  </div>
-{/key}

package/src/components/LoginPage.svelte

@@ -1,163 +0,0 @@
-<script lang="ts">
-  import { useLogin, getAuthProvider } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
-  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({}) },
-   * ];
-   * ```
-   */
-  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<{
-    title?: string;
-    onSuccess?: () => void;
-    socialProviders?: SocialProvider[];
-  }>();
-
-  const login = useLogin();
-  const authProvider = getAuthProvider();
-
-  let identifier = $state('');
-  let password = $state('');
-  let error = $state('');
-
-  async function handleSubmit(e: Event) {
-    e.preventDefault();
-    error = '';
-
-    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
-    if (!password) { error = t('auth.passwordRequired'); return; }
-
-    const result = await login.mutate({ email: identifier, username: identifier, password });
-    if (result.success) {
-      onSuccess?.();
-    } else {
-      error = result.error?.message ?? t('common.loginFailed');
-    }
-  }
-</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>
-        <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}
-
-          <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>
-          </div>
-
-          <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"
-            />
-          </div>
-
-          <Button type="submit" class="w-full" disabled={login.isLoading}>
-            {#if login.isLoading}
-              <Loader2 class="h-4 w-4 animate-spin mr-2" />
-            {/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>
-
-          <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}
-
-        {#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')}
-            </Button>
-          </div>
-        {/if}
-      </Card.CardContent>
-    </Card.Card>
-
-    <p class="text-xs text-muted-foreground mt-4 text-center">
-      Powered by {title}
-    </p>
-  </div>
-</div>
-

package/src/components/MarkdownRenderer.svelte

@@ -1,127 +0,0 @@
-<script lang="ts">
-  import * as markedPkg from "marked";
-  import * as markedHighlightPkg from "marked-highlight";
-  import * as hljsPkg from "highlight.js";
-  import * as DOMPurifyPkg from "isomorphic-dompurify";
-  import { Check, Copy } from '@lucide/svelte';
-  import { Button } from "./ui/button/index.js";
-
-  const Marked = markedPkg.Marked;
-  const markedHighlight = markedHighlightPkg.markedHighlight;
-  const hljsModule = hljsPkg.default || hljsPkg;
-  const DOMPurify = 'default' in DOMPurifyPkg ? DOMPurifyPkg.default : DOMPurifyPkg;
-
-  // Only safely import css if hljs exists
-  if (hljsModule && Object.keys(hljsModule).length > 0) {
-    // @ts-ignore
-    import("highlight.js/styles/github-dark.css").catch(() => {});
-  }
-
-  interface Props {
-    /** The raw markdown string to render */
-    content: string;
-    /** Whether to enable streaming/typing effect styling */
-    streaming?: boolean;
-    /** Custom class for the container */
-    class?: string;
-  }
-
-  let { content, streaming = false, class: className = "" }: Props = $props();
-
-  const hasMarkdownDeps = !!(Marked && Object.keys(DOMPurify || {}).length > 0);
-
-  // Configure marked with syntax highlighting if available
-  const markedObj = hasMarkdownDeps ? new Marked(
-    markedHighlight({
-      langPrefix: "hljs language-",
-      highlight(code: string, lang: string) {
-        const language = hljsModule.getLanguage && hljsModule.getLanguage(lang) ? lang : "plaintext";
-        return hljsModule.highlight ? hljsModule.highlight(code, { language }).value : code;
-      },
-    }),
-  ) : null;
-
-  // Render HTML safely
-  const html = $derived(
-    hasMarkdownDeps
-      ? DOMPurify.sanitize(markedObj!.parse(content || "") as string)
-      : `<div style="white-space: pre-wrap">${String(content || "").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>`
-  );
-
-  // Handle copy code blocks
-  let copiedBlock = $state<string | null>(null);
-
-  function handleCopy(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    const button = target.closest(".copy-btn");
-    if (!button) return;
-
-    const pre = button.closest(".code-block-wrapper")?.querySelector("pre");
-    if (!pre) return;
-
-    const code = pre.textContent || "";
-    navigator.clipboard.writeText(code);
-
-    const id = Math.random().toString(36);
-    copiedBlock = id;
-    button.setAttribute("data-copied-id", id);
-
-    setTimeout(() => {
-      if (copiedBlock === id) copiedBlock = null;
-    }, 2000);
-  }
-
-  // Inject copy buttons into the HTML after rendering
-  // We do this via action instead of raw string manipulation for safety
-  function enhanceCodeBlocks(node: HTMLElement, _: string) {
-    return {
-      update(newHtml: string) {
-        // Find all pre > code blocks that don't have wrappers yet
-        const pres = node.querySelectorAll("pre:not(.enhanced)");
-        pres.forEach((pre) => {
-          pre.classList.add("enhanced");
-          const wrapper = document.createElement("div");
-          wrapper.className =
-            "code-block-wrapper group relative my-4 rounded-md bg-foreground/95";
-
-          const header = document.createElement("div");
-          header.className =
-            "flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800";
-
-          const lang =
-            Array.from(pre.querySelector("code")?.classList || [])
-              .find((c) => c.startsWith("language-"))
-              ?.replace("language-", "") || "Code";
-          header.innerHTML = `
-            <span>${lang}</span>
-            <button class="copy-btn hover:text-white transition-colors flex items-center gap-1">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
-            </button>
-          `;
-
-          pre.replaceWith(wrapper);
-          wrapper.appendChild(header);
-
-          const scrollContainer = document.createElement("div");
-          scrollContainer.className = "overflow-x-auto p-4";
-          scrollContainer.appendChild(pre);
-          wrapper.appendChild(scrollContainer);
-        });
-
-        // Add event listener for copy buttons
-        node.addEventListener("click", handleCopy);
-      },
-      destroy() {
-        node.removeEventListener("click", handleCopy);
-      },
-    };
-  }
-</script>
-
-<div 
-  class="prose prose-sm dark:prose-invert max-w-none wrap-break-word {className}"
-  class:streaming={streaming}
-  use:enhanceCodeBlocks={html}
->
-  {@html html}
-</div>

package/src/components/ModalForm.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { FieldDefinition } from '@svadmin/core';
-  import { getResource, useForm } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import * as Dialog from './ui/dialog/index.js';
-  import AutoForm from './AutoForm.svelte';
-
-  let { resourceName, mode = 'create', id, open = $bindable(false), onSuccess } = $props<{
-    resourceName: string;
-    mode?: 'create' | 'edit';
-    id?: string | number;
-    open: boolean;
-    onSuccess?: () => void;
-  }>();
-
-  const resource = $derived(getResource(resourceName));
-  const fieldCount = $derived(resource.fields.filter(f => f.showInForm !== false).length);
-  const dialogWidth = $derived(fieldCount > 8 ? 'sm:max-w-3xl' : fieldCount > 5 ? 'sm:max-w-2xl' : 'sm:max-w-lg');
-
-  function handleClose() {
-    open = false;
-    onSuccess?.();
-  }
-</script>
-
-{#if open}
-  <Dialog.Dialog bind:open>
-    <Dialog.DialogContent class="{dialogWidth} max-h-[85vh] overflow-y-auto">
-      <Dialog.DialogHeader>
-        <Dialog.DialogTitle>
-          {mode === 'create' ? `${t('common.create')}${resource.label}` : `${t('common.edit')}${resource.label}`}
-        </Dialog.DialogTitle>
-      </Dialog.DialogHeader>
-      <AutoForm {resourceName} {mode} {id} />
-    </Dialog.DialogContent>
-  </Dialog.Dialog>
-{/if}

package/src/components/NavigateToResource.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { useMenu } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  
-  const { menuItems } = useMenu();
-
-  $effect(() => {
-    // Automatically navigate to the first defined resource
-    if (menuItems.length > 0) {
-      navigate(menuItems[0].route);
-    }
-  });
-</script>
-
-<div class="flex h-screen w-screen items-center justify-center p-4 text-muted-foreground">
-  <div class="text-center">
-    <div class="mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-primary border-r-transparent"></div>
-    <p>Navigating to default resource...</p>
-  </div>
-</div>

package/src/components/PageHeader.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Breadcrumbs from './Breadcrumbs.svelte';
-
-  interface Props {
-    title: string;
-    description?: string;
-    actions?: Snippet;
-    showBreadcrumbs?: boolean;
-    class?: string;
-  }
-
-  let {
-    title,
-    description,
-    actions,
-    showBreadcrumbs = true,
-    class: className = '',
-  }: Props = $props();
-</script>
-
-<div class="space-y-4 {className}">
-  {#if showBreadcrumbs}
-    <Breadcrumbs />
-  {/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>
-      {#if description}
-        <p class="text-sm text-muted-foreground">{description}</p>
-      {/if}
-    </div>
-    {#if actions}
-      <div class="flex items-center gap-2">
-        {@render actions()}
-      </div>
-    {/if}
-  </div>
-</div>

package/src/components/PageSkeleton.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { Skeleton } from './ui/skeleton';
-
-  let {
-    type = 'list',
-    rows = 5,
-  } = $props<{
-    type?: 'list' | 'show' | 'form';
-    rows?: number;
-  }>();
-</script>
-
-<div class="w-full space-y-6" out:fade={{ duration: 200 }}>
-  <!-- Header Skeleton -->
-  <div class="flex items-center justify-between">
-    <div class="space-y-2">
-      <Skeleton class="h-8 w-[200px]" />
-      <Skeleton class="h-4 w-[300px]" />
-    </div>
-    {#if type === 'list'}
-      <Skeleton class="h-10 w-[120px]" />
-    {/if}
-  </div>
-
-  <div class="rounded-md border p-4 space-y-4">
-    {#if type === 'list'}
-      <!-- Table Header -->
-      <div class="flex gap-4 border-b pb-4">
-        {#each Array(4) as _}
-          <Skeleton class="h-6 flex-1" />
-        {/each}
-      </div>
-      <!-- Table Rows -->
-      <div class="space-y-4">
-        {#each Array(rows) as _}
-          <div class="flex gap-4">
-            <Skeleton class="h-6 flex-1" />
-            <Skeleton class="h-6 flex-1" />
-            <Skeleton class="h-6 flex-1" />
-            <Skeleton class="h-6 flex-1" />
-          </div>
-        {/each}
-      </div>
-    {:else if type === 'show'}
-      <!-- Key-Value pairs -->
-      <div class="space-y-6">
-        {#each Array(rows) as _}
-          <div class="space-y-2">
-            <Skeleton class="h-4 w-[100px]" />
-            <Skeleton class="h-6 w-[250px]" />
-          </div>
-        {/each}
-      </div>
-    {:else if type === 'form'}
-      <!-- Form Inputs -->
-      <div class="space-y-6">
-        {#each Array(rows) as _}
-          <div class="space-y-2">
-            <Skeleton class="h-4 w-[100px]" />
-            <Skeleton class="h-10 w-full max-w-md" />
-          </div>
-        {/each}
-        <div class="pt-4 flex gap-2">
-          <Skeleton class="h-10 w-[100px]" />
-          <Skeleton class="h-10 w-[100px]" />
-        </div>
-      </div>
-    {/if}
-  </div>
-</div>

package/src/components/PasswordInput.svelte

@@ -1,96 +0,0 @@
-<script lang="ts">
-  import { Input } from './ui/input/index.js';
-  import { Button } from './ui/button/index.js';
-  import TooltipButton from './TooltipButton.svelte';
-  import { Label } from './ui/label/index.js';
-  import { Progress } from './ui/progress/index.js';
-  import { Lock, Eye, EyeOff } from '@lucide/svelte';
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    id: string;
-    label: string;
-    value: string;
-    placeholder?: string;
-    autocomplete?: string;
-    showStrength?: boolean;
-    class?: string;
-  }
-
-  let {
-    id,
-    label,
-    value = $bindable(''),
-    placeholder = '••••••••',
-    autocomplete = 'current-password',
-    showStrength = false,
-    class: className = '',
-  }: Props = $props();
-
-  let showPassword = $state(false);
-
-  // Password strength calculation
-  const strength = $derived.by(() => {
-    if (!showStrength || !value) return 0;
-    let score = 0;
-    if (value.length >= 8) score += 25;
-    if (value.length >= 12) score += 10;
-    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 25;
-    if (/\d/.test(value)) score += 20;
-    if (/[^a-zA-Z0-9]/.test(value)) score += 20;
-    return Math.min(score, 100);
-  });
-
-  const strengthColor = $derived(
-    strength < 30 ? 'bg-destructive' :
-    strength < 60 ? 'bg-warning' :
-    strength < 80 ? 'bg-info' : 'bg-success'
-  );
-
-  const strengthLabel = $derived(
-    strength < 30 ? 'Weak' :
-    strength < 60 ? 'Fair' :
-    strength < 80 ? 'Good' : 'Strong'
-  );
-</script>
-
-<div class="space-y-2 {className}">
-  <Label for={id}>{label}</Label>
-  <div class="relative">
-    <Lock 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}
-      type={showPassword ? 'text' : 'password'}
-      {placeholder}
-      bind:value
-      class="pl-9 pr-9"
-      autocomplete={autocomplete as any}
-    />
-    <TooltipButton
-      tooltip={showPassword ? t('common.hidePassword') : t('common.showPassword')}
-      variant="ghost"
-      size="icon"
-      type="button"
-      class="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 z-[1]"
-      onclick={(e) => { e.preventDefault(); showPassword = !showPassword; }}
-      tabindex={-1}
-    >
-      {#if showPassword}
-        <EyeOff class="h-4 w-4" />
-      {:else}
-        <Eye class="h-4 w-4" />
-      {/if}
-    </TooltipButton>
-  </div>
-  {#if showStrength && value}
-    <div class="flex items-center gap-2">
-      <div class="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
-        <div
-          class="h-full rounded-full transition-all duration-300 {strengthColor}"
-          style="width: {strength}%"
-        ></div>
-      </div>
-      <span class="text-xs text-muted-foreground w-12 text-right">{strengthLabel}</span>
-    </div>
-  {/if}
-</div>