shadcn-svelte ui custom password input

password-input.svelte

<script lang="ts">
	import type { HTMLInputAttributes } from 'svelte/elements';
	import type { InputEvents } from './index.js';
	import { cn } from '$lib/utils.js';
	import { EyeIcon, EyeOffIcon } from 'lucide-svelte';
	import Button from '../button/button.svelte';

	type $$Props = HTMLInputAttributes;
	type $$Events = InputEvents;

	let className: $$Props['class'] = undefined;
	export let value: $$Props['value'] = undefined;
	export { className as class };

	// Workaround for https://github.com/sveltejs/svelte/issues/9305
	// Fixed in Svelte 5, but not backported to 4.x.
	export let readonly: $$Props['readonly'] = undefined;

	let showPassword = false;
	let disabled: $$Props['disabled'] = undefined;

	const inputStyle =
		'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
</script>

<div class="relative">
	{#if showPassword}
		<input
			class={cn(inputStyle, className)}
			bind:value
			{readonly}
			on:blur
			on:change
			on:click
			on:focus
			on:focusin
			on:focusout
			on:keydown
			on:keypress
			on:keyup
			on:mouseover
			on:mouseenter
			on:mouseleave
			on:paste
			on:input
			on:wheel
			type="text"
			{...$$restProps}
		/>
	{:else}
		<input
			class={cn(inputStyle, className)}
			bind:value
			{readonly}
			on:blur
			on:change
			on:click
			on:focus
			on:focusin
			on:focusout
			on:keydown
			on:keypress
			on:keyup
			on:mouseover
			on:mouseenter
			on:mouseleave
			on:paste
			on:input
			on:wheel
			type="password"
			{...$$restProps}
		/>
	{/if}
	<Button
		type="button"
		variant="ghost"
		size="sm"
		class="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
		on:click={() => (showPassword = !showPassword)}
		{disabled}
	>
		{#if showPassword && !disabled}
			<EyeIcon class="h-4 w-4" aria-hidden="true" />
		{:else}
			<EyeOffIcon class="h-4 w-4" aria-hidden="true" />
		{/if}
		<span class="sr-only">
			{showPassword ? 'Hide password' : 'Show password'}
		</span>
	</Button>
</div>

<style>
	.hide-password-toggle::-ms-reveal,
	.hide-password-toggle::-ms-clear {
		visibility: hidden;
		pointer-events: none;
		display: none;
	}
</style>

sample.svelte

<script>
  	import { PasswordInput } from '@/lib/components/ui/password-input';
</script>

<PasswordInput
  id="password-2"
  placeholder=""
  disabled={loading}
  class="mb-4 mt-2 h-12 rounded-md bg-f-grey text-lg"
  bind:value={data.surname}
/>