63 lines
1.5 KiB
Svelte
63 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { Field } from '@ark-ui/svelte/field';
|
|
import type { Snippet } from 'svelte';
|
|
import type { HTMLInputAttributes } from 'svelte/elements';
|
|
|
|
interface Props {
|
|
id: string;
|
|
label: string;
|
|
type?: string;
|
|
placeholder?: string;
|
|
autocomplete?: HTMLInputAttributes['autocomplete'];
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
error?: string | null;
|
|
right?: Snippet;
|
|
value?: string;
|
|
}
|
|
|
|
let {
|
|
id,
|
|
label,
|
|
type = 'text',
|
|
placeholder = '',
|
|
autocomplete,
|
|
disabled = false,
|
|
required = false,
|
|
error = null,
|
|
right,
|
|
value = $bindable('')
|
|
}: Props = $props();
|
|
|
|
const invalid = $derived(!!error);
|
|
</script>
|
|
|
|
<Field.Root {invalid} {required} class="space-y-2">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<Field.Label
|
|
for={id}
|
|
class="text-base-content/60 text-xs font-semibold tracking-wider uppercase"
|
|
>
|
|
{label}
|
|
</Field.Label>
|
|
{@render right?.()}
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<Field.Input
|
|
{id}
|
|
{type}
|
|
{placeholder}
|
|
{disabled}
|
|
{autocomplete}
|
|
{required}
|
|
bind:value
|
|
class="border-base-content/10 bg-base-200/25 text-base-content placeholder-base-content/40 focus:border-primary/50 focus:bg-base-200/35 focus:ring-primary/20 w-full rounded-xl border px-4 py-3 transition-all duration-300 focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
|
|
/>
|
|
</div>
|
|
|
|
{#if error}
|
|
<Field.ErrorText class="text-error text-sm font-medium">{error}</Field.ErrorText>
|
|
{/if}
|
|
</Field.Root>
|