91 lines
2.6 KiB
Svelte
91 lines
2.6 KiB
Svelte
<!--
|
|
Component: Input
|
|
Provides styled input component with all the shadcn input props
|
|
-->
|
|
<script lang="ts" module>
|
|
import { Input as BaseInput } from '$shared/shadcn/ui/input';
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
import {
|
|
type VariantProps,
|
|
tv,
|
|
} from 'tailwind-variants';
|
|
|
|
export const inputVariants = tv({
|
|
base: [
|
|
'w-full backdrop-blur-md border font-medium transition-all duration-200',
|
|
'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:tracking-wide',
|
|
],
|
|
variants: {
|
|
variant: {
|
|
default: 'bg-background-80 border-border-muted shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
|
|
ghost: 'bg-transparent border-transparent shadow-none',
|
|
},
|
|
size: {
|
|
sm: [
|
|
'h-9 sm:h-10 md:h-11 rounded-lg',
|
|
'px-3 sm:px-3.5 md:px-4',
|
|
'text-xs sm:text-sm md:text-base',
|
|
'placeholder:text-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
|
|
],
|
|
md: [
|
|
'h-10 sm:h-12 md:h-14 rounded-xl',
|
|
'px-3.5 sm:px-4 md:px-5',
|
|
'text-sm sm:text-base md:text-lg',
|
|
'placeholder:text-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
|
|
],
|
|
lg: [
|
|
'h-12 sm:h-14 md:h-16 rounded-2xl',
|
|
'px-4 sm:px-5 md:px-6',
|
|
'text-sm sm:text-base md:text-lg',
|
|
'placeholder:text-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
|
|
],
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
size: 'lg',
|
|
},
|
|
});
|
|
|
|
type InputVariant = VariantProps<typeof inputVariants>['variant'];
|
|
type InputSize = VariantProps<typeof inputVariants>['size'];
|
|
|
|
export type InputProps = {
|
|
/**
|
|
* Current search value (bindable)
|
|
*/
|
|
value?: string;
|
|
/**
|
|
* Additional CSS classes for the container
|
|
*/
|
|
class?: string;
|
|
/**
|
|
* Visual style variant
|
|
*/
|
|
variant?: InputVariant;
|
|
/**
|
|
* Size variant
|
|
*/
|
|
size?: InputSize;
|
|
[key: string]: any;
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
let {
|
|
value = $bindable(''),
|
|
class: className,
|
|
variant = 'default',
|
|
size = 'lg',
|
|
...rest
|
|
}: InputProps = $props();
|
|
</script>
|
|
|
|
<BaseInput
|
|
bind:value
|
|
class={cn(inputVariants({ variant, size }), className)}
|
|
{...rest}
|
|
/>
|