glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Input): add tailwind variants with sizes, update stories

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-15 23:00:12 +03:00
parent 6001f50cf5
commit aa3f467821
2 changed files with 131 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/shared/ui/Input/Input.svelte
View File

@@ -2,60 +2,89 @@
Component: Input
Provides styled input component with all the shadcn input props
-->
<script lang="ts">
import { Input } from '$shared/shadcn/ui/input';
<script lang="ts" module>
import { Input as BaseInput } from '$shared/shadcn/ui/input';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { ComponentProps } from 'svelte';
import {
type VariantProps,
tv,
} from 'tailwind-variants';
type Props = ComponentProps<typeof Input> & {
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-xs 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-xs 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-xs sm:placeholder:text-sm md:placeholder:text-base',
],
},
},
defaultVariants: {
variant: 'default',
size: 'lg',
},
});
export type InputVariant = VariantProps<typeof inputVariants>['variant'];
export type InputSize = VariantProps<typeof inputVariants>['size'];
export type InputProps = {
/**
* Current search value (bindable)
*/
value: string;
value?: string;
/**
* Additional CSS classes for the container
*/
class?: string;
variant?: 'default' | 'ghost';
/**
* 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
}: Props = $props();
const isGhost = $derived(variant === 'ghost');
}: InputProps = $props();
</script>
<Input
<BaseInput
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,
)}
class={cn(inputVariants({ variant, size }), className)}
{...rest}
/>