Add input variant

[simon-lund]

When I run pnpm dlx shadcn-svelte@next add input the following code is added to my project:

<script lang="ts">
	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
	import type { WithElementRef } from "bits-ui";
	import { cn } from "$lib/utils.js";

	type InputType = Exclude<HTMLInputTypeAttribute, "file">;

	type Props = WithElementRef<
		Omit<HTMLInputAttributes, "type"> &
			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
	>;

	let {
		ref = $bindable(null),
		value = $bindable(),
		type,
		files = $bindable(),
		class: className,
		...restProps
	}: Props = $props();
</script>

{#if type === "file"}
	<input
		bind:this={ref}
		class={cn(
			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
			className
		)}
		type="file"
		bind:files
		bind:value
		{...restProps}
	/>
{:else}
	<input
		bind:this={ref}
		class={cn(
			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
			className
		)}
		{type}
		bind:value
		{...restProps}
	/>
{/if}

Instead I'd like to see an inputVariant similar to what exists for buttons. This would streamline the creation of custom inputs with icons.
I understand this issue was closed because shadcn-ui doesn't officially support composing inputs with icons (#672). However, adding an input variant doesn't add functionality -- it simply exposes reusable styling, allowing developers to create customized inputs.
With this approach, building a search bar becomes straightforward:

svelte<script lang="ts">
    import {inputVariants} from "$lib/components/ui/input";
    import {SearchIcon} from "@lucide/svelte";
</script>
<label class={cn(..., inputVariants(...))}>
    <SearchIcon />
   <input ... />
</label>

This would need minor adjustments, such as adding focus-within alongside focus-visible.

[simon-lund]

It would then look like this:

<script lang="ts" module>
	import type { WithElementRef } from 'bits-ui';
	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
	import { type VariantProps, tv } from 'tailwind-variants';

	export const inputVariants = tv({
		base: 'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:outline-none',
		variants: {
			variant: {
				file: 'file:border-0 file:bg-transparent file:text-sm file:font-medium'
			}
		},
		defaultVariants: {
			variant: undefined
		}
	});

	export type InputVariant = VariantProps<typeof inputVariants>['variant'];

	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;

	export type InputProps = WithElementRef<
		Omit<HTMLInputAttributes, 'type'> &
		({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
	>;
</script>

<script lang="ts">
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		value = $bindable(),
		type,
		files = $bindable(),
		class: className,
		...restProps
	}: InputProps = $props();

</script>

{#if type === "file"}
	<input
		bind:this={ref}
		class={cn(inputVariants({ variant: "file" }), className)}
		type="file"
		bind:files={files}
		bind:value
		{...restProps}
	/>
{:else}
	<input
		bind:this={ref}
		class={cn(inputVariants(), className)}
		{type}
		bind:value
		{...restProps}
	/>
{/if}