39b2b642d2
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>
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import type { DropdownMenuItemProps } from './types';
|
|
|
|
export const DropdownMenuItem = React.forwardRef<
|
|
HTMLButtonElement,
|
|
DropdownMenuItemProps
|
|
>(({ className, inset, onKeyDown, onClick, ...props }, ref) => {
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
if (onClick && !props.disabled) {
|
|
(onClick as (e: React.KeyboardEvent<HTMLButtonElement>) => void)(e);
|
|
}
|
|
}
|
|
onKeyDown?.(e);
|
|
};
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
type="button"
|
|
role="menuitem"
|
|
className={cn(
|
|
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
|
|
'transition-colors duration-[var(--duration-fast)] focus-visible:bg-white/5 focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-50',
|
|
'text-foreground hover:bg-muted/50 w-full text-left',
|
|
inset && 'pl-8',
|
|
className,
|
|
)}
|
|
onKeyDown={handleKeyDown}
|
|
onClick={onClick}
|
|
{...props}
|
|
/>
|
|
);
|
|
});
|
|
DropdownMenuItem.displayName = 'DropdownMenuItem';
|