Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const inputField = tv({ base: "flex min-h-9 items-center gap-2 rounded border bg-background-default px-2 py-1 transition-colors", variants: { error: { false: "border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong", true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-within:border-border-focus-danger focus-within:ring-1 focus-within:ring-border-focus-danger" }, disabled: { false: "", true: "cursor-not-allowed bg-background-inset text-foreground-disabled" } }, defaultVariants: { error: false, disabled: false } });
export type InputFieldVariants = VariantProps<typeof inputField>;</script>
<script lang="ts"> import type { Component } from "svelte"; import type { HTMLInputAttributes, SvelteHTMLElements } from "svelte/elements"; import Spinner from "./Spinner.svelte";
interface Props extends Omit<HTMLInputAttributes, "class" | "value"> { value?: string; error?: boolean; disabled?: boolean; loading?: boolean; iconLeft?: Component<SvelteHTMLElements["svg"]>; iconRight?: Component<SvelteHTMLElements["svg"]>; class?: string; }
let { value = $bindable(""), error = false, disabled = false, loading = false, iconLeft, iconRight, class: className, ...rest }: Props = $props();
const classes = $derived(inputField({ error, disabled, class: className }));</script>
<div class={classes}> {#if iconLeft} {@const IconLeft = iconLeft} <IconLeft class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" /> {/if} <input bind:value {disabled} aria-invalid={error} aria-busy={loading} class="flex-1 bg-transparent text-sm outline-none placeholder:text-foreground-placeholder disabled:cursor-not-allowed" {...rest} /> {#if loading} <Spinner class="size-4 shrink-0" /> {:else if iconRight} {@const IconRight = iconRight} <IconRight class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" /> {/if}</div>