-
-
Notifications
You must be signed in to change notification settings - Fork 98
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5c2003a
commit a9ae7d0
Showing
2 changed files
with
21 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,38 @@ | ||
<script lang="ts"> | ||
import { PinInput } from "$lib"; | ||
import { Toggle } from "$lib"; | ||
import { LockKey, LockKeyOpen } from "$icons/index.js"; | ||
import { Eye, EyeSlash } from "$icons/index.js"; | ||
let value: string[] | undefined = ["5", "1", "3", "7"]; | ||
let value: string[] | undefined = []; | ||
let unlocked = false; | ||
let unlocked = true; | ||
let pinInputType: "text" | "password" = "password"; | ||
$: pinInputType = unlocked ? "text" : "password"; | ||
</script> | ||
|
||
<PinInput.Root | ||
bind:value | ||
class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-border bg-background py-1 pl-[18px] pr-1.5 shadow-mini" | ||
type={pinInputType} | ||
> | ||
<PinInput.Input class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground" /> | ||
<PinInput.Input class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground" /> | ||
<PinInput.Input class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground" /> | ||
<PinInput.Input class="w-5 bg-inherit text-center font-alt text-[19px] text-foreground" /> | ||
<PinInput.Root bind:value class="flex items-center gap-2" type={pinInputType} placeholder="0"> | ||
<PinInput.Input | ||
class="flex h-input w-10 select-none rounded-input border border-foreground bg-background px-2 py-3 text-center font-alt text-[17px] tracking-[0.01em] text-foreground placeholder-shown:border-border-input focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover" | ||
/> | ||
<PinInput.Input | ||
class="flex h-input w-10 select-none rounded-input border border-foreground bg-background px-2 py-3 text-center font-alt text-[17px] tracking-[0.01em] text-foreground placeholder-shown:border-border-input focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover" | ||
/> | ||
<PinInput.Input | ||
class="flex h-input w-10 select-none rounded-input border border-foreground bg-background px-2 py-3 text-center font-alt text-[17px] tracking-[0.01em] text-foreground placeholder-shown:border-border-input focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover" | ||
/> | ||
<PinInput.Input | ||
class="flex h-input w-10 select-none rounded-input border border-foreground bg-background px-2 py-3 text-center font-alt text-[17px] tracking-[0.01em] text-foreground placeholder-shown:border-border-input focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover" | ||
/> | ||
<PinInput.HiddenInput /> | ||
<Toggle.Root | ||
aria-label="toggle code visibility" | ||
class="inline-flex size-10 items-center justify-center rounded-[9px] bg-background transition-all hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted active:data-[state=on]:bg-dark-10" | ||
class="inline-flex size-10 items-center justify-center rounded-[9px] text-foreground/40 transition-all hover:bg-muted active:scale-98 active:bg-dark-10 active:data-[state=on]:bg-dark-10" | ||
bind:pressed={unlocked} | ||
> | ||
{#if unlocked} | ||
<LockKey class="size-6" /> | ||
<Eye class="size-5" /> | ||
{:else} | ||
<LockKeyOpen class="size-6" /> | ||
<EyeSlash class="size-5" /> | ||
{/if} | ||
</Toggle.Root> | ||
</PinInput.Root> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters