0dcc9a4f14
- button.tsx: Remove gaming/terminal/nature/glass variants, add link variant, add focus-visible glow, remove scale transforms and neon shadows - card.tsx: Remove glass/glow/glowMagenta variants, update radius to rounded-lg, remove hover translate transforms - modal.tsx: Update backdrop to bg-black/60 + blur(4px), bg-popover, SUMI easing curves and durations - badge.tsx: Terminal variant aliased to success, doc updates - avatar.tsx: Already migrated, doc updates - progress.tsx: Fix gradient colors to SUMI semantics - input.tsx: bg-background, border-border, SUMI focus glow - textarea.tsx: Add SUMI focus glow Co-authored-by: Cursor <cursoragent@cursor.com>
69 lines
No EOL
2.6 KiB
TypeScript
69 lines
No EOL
2.6 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface InputProps
|
|
extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
icon?: React.ReactNode;
|
|
label?: string;
|
|
/** Error message to display below the input */
|
|
error?: string;
|
|
}
|
|
|
|
import { Search } from 'lucide-react';
|
|
import { Label } from './label';
|
|
import { FileUpload as BaseFileUpload } from './file-upload';
|
|
|
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
({ className, type, icon, label, error, id, ...props }, ref) => {
|
|
const errorId = React.useId();
|
|
return (
|
|
<div className="space-y-2 w-full">
|
|
{label && <Label htmlFor={id} className="text-xs font-mono text-muted-foreground uppercase tracking-widest">{label}</Label>}
|
|
<div className="relative group">
|
|
{icon && (
|
|
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors duration-[var(--duration-fast)] pointer-events-none">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<input
|
|
id={id}
|
|
type={type}
|
|
aria-invalid={!!error}
|
|
aria-describedby={error ? errorId : undefined}
|
|
className={cn(
|
|
"flex h-11 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
|
|
"transition-all duration-[var(--duration-fast)]",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
"focus-visible:shadow-[var(--sumi-shadow-glow)]",
|
|
"hover:border-border/80",
|
|
icon && "pl-10",
|
|
error && "border-destructive focus-visible:ring-destructive/30",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
{error && (
|
|
<p id={errorId} className="text-xs text-destructive mt-1 animate-shake">{error}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
Input.displayName = 'Input';
|
|
|
|
|
|
const SearchInput = React.forwardRef<HTMLInputElement, InputProps>(
|
|
(props, ref) => <Input {...props} ref={ref} icon={<Search className="w-4 h-4" />} />
|
|
);
|
|
SearchInput.displayName = 'SearchInput';
|
|
|
|
// Shim for legacy FileUpload usage
|
|
const FileUpload = (props: any) => (
|
|
<div className="space-y-2">
|
|
<BaseFileUpload onFileSelect={() => { }} {...props} />
|
|
</div>
|
|
);
|
|
|
|
export { Input, SearchInput, FileUpload }; |