66a56409ad
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y): - Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source for layout/shell (index.css), shadows (design-system.css), durations/easing. - Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500 replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes. - Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls, AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item, TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable. - ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary. - Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts. - Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories. - .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification. - apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual). Co-authored-by: Cursor <cursoragent@cursor.com>
59 lines
No EOL
2.1 KiB
TypeScript
59 lines
No EOL
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface InputProps
|
|
extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
icon?: React.ReactNode;
|
|
label?: string;
|
|
}
|
|
|
|
import { Search, Upload } from 'lucide-react';
|
|
import { Label } from './label';
|
|
import { FileUpload as BaseFileUpload } from './file-upload';
|
|
|
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
({ className, type, icon, label, id, ...props }, ref) => {
|
|
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}
|
|
className={cn(
|
|
"flex h-11 w-full rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-sm text-white placeholder:text-muted-foreground/50 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
|
|
"backdrop-blur-sm transition-all duration-[var(--duration-fast)]",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary/50",
|
|
"hover:bg-white/5 hover:border-white/20",
|
|
icon && "pl-10",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
</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 }; |