30 lines
786 B
Svelte
30 lines
786 B
Svelte
<script lang="ts">
|
|
import type { HTMLInputAttributes } from "svelte/elements";
|
|
|
|
interface Props extends Omit<HTMLInputAttributes, "value" | "size"> {
|
|
variant?: "default" | "sheet";
|
|
size?: "md" | "sm";
|
|
value?: string | number | null;
|
|
el?: HTMLInputElement | null;
|
|
}
|
|
|
|
let {
|
|
variant = "default",
|
|
size = "md",
|
|
value = $bindable<string | number | null>(),
|
|
el = $bindable(null),
|
|
class: className = "",
|
|
...rest
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<input
|
|
bind:this={el}
|
|
bind:value
|
|
class="w-full {variant === 'sheet'
|
|
? 'bg-zinc-800'
|
|
: 'bg-zinc-900'} border border-zinc-700 rounded-xl px-4 {size === 'sm'
|
|
? 'py-2.5'
|
|
: 'py-3'} text-zinc-100 focus:outline-none focus:border-green-500 transition-colors {className}"
|
|
{...rest}
|
|
/>
|