62 lines
1.6 KiB
Svelte
62 lines
1.6 KiB
Svelte
<!--
|
|
Component: Input
|
|
Provides styled input component with all the shadcn input props
|
|
-->
|
|
<script lang="ts">
|
|
import { Input } from '$shared/shadcn/ui/input';
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
import type { ComponentProps } from 'svelte';
|
|
|
|
type Props = ComponentProps<typeof Input> & {
|
|
/**
|
|
* Current search value (bindable)
|
|
*/
|
|
value: string;
|
|
/**
|
|
* Additional CSS classes for the container
|
|
*/
|
|
class?: string;
|
|
|
|
variant?: 'default' | 'ghost';
|
|
};
|
|
|
|
let {
|
|
value = $bindable(''),
|
|
class: className,
|
|
variant = 'default',
|
|
...rest
|
|
}: Props = $props();
|
|
|
|
const isGhost = $derived(variant === 'ghost');
|
|
</script>
|
|
|
|
<Input
|
|
bind:value={value}
|
|
class={cn(
|
|
'h-12 sm:h-14 md:h-16 w-full text-sm sm:text-base',
|
|
'backdrop-blur-md',
|
|
isGhost ? 'bg-transparent' : 'bg-background-80',
|
|
'border border-border-muted',
|
|
isGhost ? 'border-transparent' : 'border-border-muted',
|
|
isGhost ? 'shadow-none' : 'shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
|
|
'focus-visible:border-border-soft',
|
|
'focus-visible:outline-none',
|
|
'focus-visible:ring-1',
|
|
'focus-visible:ring-border-muted/30',
|
|
'focus-visible:bg-background-95',
|
|
'hover:bg-background-95',
|
|
'hover:border-border-soft',
|
|
'text-foreground',
|
|
'placeholder:text-text-muted',
|
|
'placeholder:font-mono',
|
|
'placeholder:text-xs sm:placeholder:text-sm',
|
|
'placeholder:tracking-wide',
|
|
'pl-4 sm:pl-6 pr-4 sm:pr-6',
|
|
'rounded-xl',
|
|
'transition-all duration-200',
|
|
'font-medium',
|
|
className,
|
|
)}
|
|
{...rest}
|
|
/>
|