@mrgnw/anahtar 0.0.27 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -25,6 +25,8 @@ interface Props {
|
|
|
25
25
|
onStepChange?: (step: 'email' | 'otp' | 'authenticated') => void;
|
|
26
26
|
/** Extra inline icons rendered before the sign-out button when authenticated. */
|
|
27
27
|
actions?: Snippet;
|
|
28
|
+
/** Show `·` dot separators between pill segments. Defaults to false (flex gap only). */
|
|
29
|
+
separators?: boolean;
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
let {
|
|
@@ -39,6 +41,7 @@ let {
|
|
|
39
41
|
getPasskeys,
|
|
40
42
|
onStepChange,
|
|
41
43
|
actions,
|
|
44
|
+
separators = false,
|
|
42
45
|
}: Props = $props();
|
|
43
46
|
|
|
44
47
|
let expanded = $state(false);
|
|
@@ -348,7 +351,7 @@ async function removePasskey(id: string) {
|
|
|
348
351
|
</button>
|
|
349
352
|
{:else if isAuthenticated}
|
|
350
353
|
<span class="anahtar-pill-email">{user?.email}</span>
|
|
351
|
-
<span class="anahtar-pill-sep">·</span>
|
|
354
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
352
355
|
{#if getPasskeys}
|
|
353
356
|
<button
|
|
354
357
|
class="anahtar-pill-icon"
|
|
@@ -361,11 +364,11 @@ async function removePasskey(id: string) {
|
|
|
361
364
|
<circle cx="7.5" cy="15.5" r="5.5"/><path d="m11.5 12 4-4"/><path d="m15 7 2 2"/><path d="m17.5 4.5 2 2"/>
|
|
362
365
|
</svg>
|
|
363
366
|
</button>
|
|
364
|
-
<span class="anahtar-pill-sep">·</span>
|
|
367
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
365
368
|
{/if}
|
|
366
369
|
{#if actions}
|
|
367
370
|
{@render actions()}
|
|
368
|
-
<span class="anahtar-pill-sep">·</span>
|
|
371
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
369
372
|
{/if}
|
|
370
373
|
<button class="anahtar-pill-icon anahtar-pill-signout" onclick={handleSignOut} title="Sign out" disabled={loading}>
|
|
371
374
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
@@ -373,7 +376,7 @@ async function removePasskey(id: string) {
|
|
|
373
376
|
</svg>
|
|
374
377
|
</button>
|
|
375
378
|
{#if compact}
|
|
376
|
-
<span class="anahtar-pill-sep">·</span>
|
|
379
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
377
380
|
<button class="anahtar-pill-icon" onclick={() => { expanded = false; showPasskeys = false; }} title="Collapse">
|
|
378
381
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
379
382
|
<line x1="18" x2="6" y1="6" y2="18"/><line x1="6" x2="18" y1="6" y2="18"/>
|
|
@@ -383,7 +386,7 @@ async function removePasskey(id: string) {
|
|
|
383
386
|
|
|
384
387
|
{:else if otpStep}
|
|
385
388
|
<span class="anahtar-pill-otp-label">{email}</span>
|
|
386
|
-
<span class="anahtar-pill-sep">·</span>
|
|
389
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
387
390
|
<div class="anahtar-pill-otp-boxes">
|
|
388
391
|
{#each otpDigits as _, i}
|
|
389
392
|
<input
|
|
@@ -21,6 +21,8 @@ interface Props {
|
|
|
21
21
|
onStepChange?: (step: 'email' | 'otp' | 'authenticated') => void;
|
|
22
22
|
/** Extra inline icons rendered before the sign-out button when authenticated. */
|
|
23
23
|
actions?: Snippet;
|
|
24
|
+
/** Show `·` dot separators between pill segments. Defaults to false (flex gap only). */
|
|
25
|
+
separators?: boolean;
|
|
24
26
|
}
|
|
25
27
|
declare const AuthPill: import("svelte").Component<Props, {}, "">;
|
|
26
28
|
type AuthPill = ReturnType<typeof AuthPill>;
|