update FramelessButton, PhoneInput, TextInput

- FramelessButton: use cursor-pointer
- PhoneInput: add setCountryByIP with geo lookup
- TextInput: add $bindable ref property

src/lib/TextInput.svelte

@@ -10,7 +10,8 @@
 		placeholder,
 		type,
 		validate: validateOpts,
-		invalidMessage
+		invalidMessage = 'Field is required',
+		ref = $bindable<HTMLInputElement | null>(null)
 	}: {
 		name: string;
 		label?: string;
@@ -19,6 +20,7 @@
 		type?: HTMLInputElement['type'];
 		validate?: ValidatorOptions;
 		invalidMessage?: string;
+		ref?: HTMLInputElement | null;
 	} = $props();
 
 	let valid: boolean = $state(true);
@@ -34,15 +36,18 @@
 		{name}
 		{type}
 		bind:value
+		bind:ref
 		validate={validateOpts}
 		onvalidate={(e) => {
 			valid = e.detail.valid;
 		}}
 	/>
 
-	<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
-		<Label for={name} error>
-			{invalidMessage !== undefined && invalidMessage != '' ? invalidMessage : 'Field is required'}
-		</Label>
-	</div>
+	{#if validateOpts}
+		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
+			<Label for={name} error>
+				{invalidMessage}
+			</Label>
+		</div>
+	{/if}
 </div>