disperse v2 [WIP]

components/Primitives/Commands.tsx

@@ -75,7 +75,7 @@ export const CommandItem = React.forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={cl(
-			'relative flex cursor-pointer select-none items-center px-2 py-1.5 mb-0.5 rounded-lg text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-base outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
 			className
 		)}
 		{...props}

components/Primitives/DropdownMenu.tsx

@@ -6,10 +6,18 @@ import {IconCheckbox} from '@icons/IconCheckbox';
 import {IconCheckboxChecked} from '@icons/IconCheckboxChecked';
 import {CheckboxItem, Content, Portal, Separator} from '@radix-ui/react-dropdown-menu';
 
-import type {ReactElement} from 'react';
+import type {ReactElement, Ref} from 'react';
+import type {
+	DropdownMenuCheckboxItemProps,
+	DropdownMenuContentProps,
+	DropdownMenuSeparatorProps
+} from '@radix-ui/react-dropdown-menu';
 
 export const DropdownMenuContent = forwardRef(
-	({className, sideOffset = 4, ...props}: any, ref): ReactElement => (
+	(
+		{className, sideOffset = 4, ...props}: DropdownMenuContentProps,
+		ref: Ref<HTMLDivElement> | undefined
+	): ReactElement => (
 		<Portal>
 			<Content
 				ref={ref}
@@ -30,44 +38,48 @@ export const DropdownMenuContent = forwardRef(
 );
 DropdownMenuContent.displayName = Content.displayName;
 
-export const DropdownMenuCheckboxItem = forwardRef(({className, children, checked, ...props}: any, ref) => (
-	<CheckboxItem
-		ref={ref}
-		className={cl(
-			'relative flex cursor-pointer items-center rounded-lg py-2 pl-8 pr-2',
-			'outline-none select-none transition-colors',
-			'text-xs text-neutral-800 group',
-			'focus:bg-neutral-300 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-			className
-		)}
-		checked={checked}
-		onSelect={(e: Event) => e.preventDefault()}
-		{...props}>
-		<span
+export const DropdownMenuCheckboxItem = forwardRef(
+	({className, children, checked, ...props}: DropdownMenuCheckboxItemProps, ref: Ref<HTMLDivElement> | undefined) => (
+		<CheckboxItem
+			ref={ref}
 			className={cl(
-				'absolute left-2 flex h-4 w-4 items-center justify-center',
-				!checked ? 'opacity-100' : 'opacity-0'
-			)}>
-			<IconCheckbox className={'size-4'} />
-		</span>
-		<span
-			className={cl(
-				'absolute left-2 flex h-4 w-4 items-center justify-center',
-				checked ? 'opacity-100' : 'opacity-0'
-			)}>
-			<IconCheckboxChecked className={'size-4'} />
-		</span>
-		{children}
-	</CheckboxItem>
-));
+				'relative flex cursor-pointer items-center rounded-lg py-2 pl-8 pr-2',
+				'outline-none select-none transition-colors',
+				'text-xs text-neutral-800 group',
+				'focus:bg-neutral-300 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+				className
+			)}
+			checked={checked}
+			onSelect={(e: Event) => e.preventDefault()}
+			{...props}>
+			<span
+				className={cl(
+					'absolute left-2 flex h-4 w-4 items-center justify-center',
+					!checked ? 'opacity-100' : 'opacity-0'
+				)}>
+				<IconCheckbox className={'size-4'} />
+			</span>
+			<span
+				className={cl(
+					'absolute left-2 flex h-4 w-4 items-center justify-center',
+					checked ? 'opacity-100' : 'opacity-0'
+				)}>
+				<IconCheckboxChecked className={'size-4'} />
+			</span>
+			{children}
+		</CheckboxItem>
+	)
+);
 DropdownMenuCheckboxItem.displayName = CheckboxItem.displayName;
 
-export const DropdownMenuSeparator = forwardRef(({className, ...props}: any, ref) => (
-	<Separator
-		ref={ref}
-		style={{width: 'calc(100% - 16px)'}}
-		className={cl('my-1 h-px w-full mx-auto bg-neutral-400', className)}
-		{...props}
-	/>
-));
+export const DropdownMenuSeparator = forwardRef(
+	({className, ...props}: DropdownMenuSeparatorProps, ref: Ref<HTMLDivElement> | undefined) => (
+		<Separator
+			ref={ref}
+			style={{width: 'calc(100% - 16px)'}}
+			className={cl('my-1 h-px w-full mx-auto bg-neutral-400', className)}
+			{...props}
+		/>
+	)
+);
 DropdownMenuSeparator.displayName = Separator.displayName;