@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.4

package/src/components/checkbox.tsx

@@ -1,10 +1,8 @@
-"use client";
-
+import { CheckIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
 
 /* -----------------------------------------------------------------------------
  * Component: Checkbox
@@ -22,36 +20,17 @@ function Checkbox({ className, ...props }: CheckboxProps): JSX.Element {
   return (
     <CheckboxPrimitive.Root
       className={cn(
-        "peer flex size-4 shrink-0 items-center justify-center",
-        "rounded-sm border border-input shadow-xs outline-hidden",
-        "text-primary-foreground",
-        "transition-[border-color,background-color,box-shadow] duration-150 ease-spring",
-        "motion-reduce:transition-none motion-reduce:duration-0",
-        "hover:not-disabled:not-aria-checked:border-ring/60",
-        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-        "disabled:opacity-50",
-        "aria-checked:border-primary aria-checked:bg-primary",
-        "aria-checked:focus-visible:ring-primary/20",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-        "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60",
-        "aria-checked:aria-invalid:bg-destructive",
-        "dark:bg-input/30",
-        "dark:aria-checked:focus-visible:ring-primary/40",
-        "dark:aria-invalid:ring-destructive/40",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className,
       )}
       data-slot="checkbox"
       {...props}
     >
       <CheckboxPrimitive.Indicator
-        className={cn(
-          "flex items-center justify-center text-current",
-          "animate-in duration-150 ease-spring zoom-in-50",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-        )}
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
         data-slot="checkbox-indicator"
       >
-        <CheckIcon className="size-3.5" />
+        <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   );

package/src/components/collapsible.tsx

@@ -1,9 +1,6 @@
-"use client";
-
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
 /* -----------------------------------------------------------------------------
  * Component: Collapsible
  * -------------------------------------------------------------------------- */

package/src/components/command.tsx

@@ -1,13 +1,10 @@
-"use client";
-
+import { Command as CommandPrimitive } from "cmdk";
+import { CheckIcon, SearchIcon } from "lucide-react";
 import type { ComponentProps, JSX } from "react";
 
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "#/components/dialog";
+import { InputGroup, InputGroupAddon } from "#/components/input-group";
 import { cn } from "#/lib/utils";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { Command as CommandPrimitive } from "cmdk";
-import { SearchIcon } from "lucide-react";
-
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from "#/components/dialog";
 
 /* -----------------------------------------------------------------------------
  * Component: Command
@@ -25,9 +22,7 @@ function Command({ className, ...props }: CommandProps): JSX.Element {
   return (
     <CommandPrimitive
       className={cn(
-        "flex flex-col overflow-hidden",
-        "rounded-[inherit]",
-        "bg-popover text-popover-foreground outline-hidden",
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
         className,
       )}
       data-slot="command"
@@ -43,33 +38,36 @@ function Command({ className, ...props }: CommandProps): JSX.Element {
 /**
  * @since 0.3.16-canary.0
  */
-type CommandDialogProps = ComponentProps<typeof Dialog>;
+interface CommandDialogProps extends ComponentProps<typeof Dialog> {
+  className?: string;
+  description?: string;
+  showCloseButton?: boolean;
+  title?: string;
+}
 
 /**
  * @since 0.3.16-canary.0
  */
-function CommandDialog({ children, ...props }: CommandDialogProps): JSX.Element {
+function CommandDialog({
+  children,
+  className,
+  description = "Search for a command to run...",
+  showCloseButton = false,
+  title = "Command Palette",
+  ...props
+}: CommandDialogProps): JSX.Element {
   return (
     <Dialog data-slot="command-dialog" {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
       <DialogContent
-        className={cn("rounded-t-lg", "sm:rounded-lg")}
+        className={cn("top-1/3 translate-y-0 overflow-hidden rounded-xl p-0", className)}
         data-slot="command-dialog-content"
+        showCloseButton={showCloseButton}
       >
-        <VisuallyHidden>
-          <DialogTitle>Search command</DialogTitle>
-          <DialogDescription>
-            Use the search bar to find and select the desired command.
-          </DialogDescription>
-        </VisuallyHidden>
-        <Command
-          className={cn(
-            "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-            "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
-            "[&_[cmdk-input]]:h-12",
-          )}
-        >
-          {children}
-        </Command>
+        {children}
       </DialogContent>
     </Dialog>
   );
@@ -89,25 +87,17 @@ type CommandInputProps = ComponentProps<typeof CommandPrimitive.Input>;
  */
 function CommandInput({ className, ...props }: CommandInputProps): JSX.Element {
   return (
-    <div
-      cmdk-input-wrapper
-      className={cn("flex items-center gap-2", "px-3", "border-b")}
-      data-slot="command-input-wrapper"
-    >
-      <SearchIcon className={cn("size-4 shrink-0", "opacity-50")} />
-      <CommandPrimitive.Input
-        className={cn(
-          "flex h-10 w-full",
-          "text-base",
-          "outline-hidden",
-          "placeholder:text-muted-foreground",
-          "disabled:opacity-50",
-          "md:text-sm",
-          className,
-        )}
-        data-slot="command-input"
-        {...props}
-      />
+    <div className="p-1 pb-0" data-slot="command-input-wrapper">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <CommandPrimitive.Input
+          className={cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)}
+          data-slot="command-input"
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
     </div>
   );
 }
@@ -127,7 +117,7 @@ type CommandListProps = ComponentProps<typeof CommandPrimitive.List>;
 function CommandList({ className, ...props }: CommandListProps): JSX.Element {
   return (
     <CommandPrimitive.List
-      className={cn("max-h-75 overflow-x-hidden overflow-y-auto", className)}
+      className={cn("max-h-72 scroll-py-1 scrollbar-none overflow-x-hidden overflow-y-auto outline-none", className)}
       data-slot="command-list"
       {...props}
     />
@@ -149,7 +139,7 @@ type CommandEmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;
 function CommandEmpty({ className, ...props }: CommandEmptyProps): JSX.Element {
   return (
     <CommandPrimitive.Empty
-      className={cn("py-6", "text-center text-sm", className)}
+      className={cn("py-6 text-center text-sm", className)}
       data-slot="command-empty"
       {...props}
     />
@@ -172,8 +162,7 @@ function CommandGroup({ className, ...props }: CommandGroupProps): JSX.Element {
   return (
     <CommandPrimitive.Group
       className={cn(
-        "overflow-hidden p-1 text-foreground",
-        "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
         className,
       )}
       data-slot="command-group"
@@ -197,7 +186,7 @@ type CommandSeparatorProps = ComponentProps<typeof CommandPrimitive.Separator>;
 function CommandSeparator({ className, ...props }: CommandSeparatorProps): JSX.Element {
   return (
     <CommandPrimitive.Separator
-      className={cn("-mx-1 h-px", "bg-border", className)}
+      className={cn("-mx-1 h-px w-auto bg-border", className)}
       data-slot="command-separator"
       {...props}
     />
@@ -216,24 +205,19 @@ type CommandItemProps = ComponentProps<typeof CommandPrimitive.Item>;
 /**
  * @since 0.3.16-canary.0
  */
-function CommandItem({ className, ...props }: CommandItemProps): JSX.Element {
+function CommandItem({ children, className, ...props }: CommandItemProps): JSX.Element {
   return (
     <CommandPrimitive.Item
       className={cn(
-        "group/command-item relative flex items-center gap-x-2",
-        "px-2 py-1.5",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "aria-disabled:opacity-50",
-        "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "[&_svg:not([class*='text-'])]:text-muted-foreground",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground",
         className,
       )}
       data-slot="command-item"
       {...props}
-    />
+    >
+      {children}
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-checked/command-item:opacity-100" />
+    </CommandPrimitive.Item>
   );
 }
 
@@ -252,7 +236,7 @@ type CommandLoadingProps = ComponentProps<typeof CommandPrimitive.Loading>;
 function CommandLoading({ className, ...props }: CommandLoadingProps): JSX.Element {
   return (
     <CommandPrimitive.Loading
-      className={cn("flex justify-center", "p-2", className)}
+      className={cn("flex justify-center p-2", className)}
       data-slot="command-loading"
       {...props}
     />
@@ -274,7 +258,10 @@ type CommandShortcutProps = ComponentProps<"span">;
 function CommandShortcut({ className, ...props }: CommandShortcutProps): JSX.Element {
   return (
     <span
-      className={cn("ml-auto", "text-xs tracking-widest text-muted-foreground", className)}
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className,
+      )}
       data-slot="command-shortcut"
       {...props}
     />

package/src/components/context-menu.tsx

@@ -1,10 +1,8 @@
-"use client";
-
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenu
@@ -34,8 +32,14 @@ type ContextMenuTriggerProps = ComponentProps<typeof ContextMenuPrimitive.Trigge
 /**
  * @since 0.3.16-canary.0
  */
-function ContextMenuTrigger({ ...props }: ContextMenuTriggerProps): JSX.Element {
-  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
+function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): JSX.Element {
+  return (
+    <ContextMenuPrimitive.Trigger
+      className={cn("select-none", className)}
+      data-slot="context-menu-trigger"
+      {...props}
+    />
+  );
 }
 
 /* -----------------------------------------------------------------------------
@@ -93,33 +97,18 @@ function ContextMenuRadioGroup({ ...props }: ContextMenuRadioGroupProps): JSX.El
 /**
  * @since 0.3.16-canary.0
  */
-interface ContextMenuSubTriggerProps extends ComponentProps<
-  typeof ContextMenuPrimitive.SubTrigger
-> {
+interface ContextMenuSubTriggerProps extends ComponentProps<typeof ContextMenuPrimitive.SubTrigger> {
   inset?: boolean;
 }
 
 /**
  * @since 0.3.16-canary.0
  */
-function ContextMenuSubTrigger({
-  children,
-  className,
-  inset,
-  ...props
-}: ContextMenuSubTriggerProps): JSX.Element {
+function ContextMenuSubTrigger({ children, className, inset, ...props }: ContextMenuSubTriggerProps): JSX.Element {
   return (
     <ContextMenuPrimitive.SubTrigger
       className={cn(
-        "flex items-center gap-x-2",
-        "px-2 py-1.5",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "data-inset:pl-8",
-        "data-open:bg-accent data-open:text-accent-foreground",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       data-inset={inset}
@@ -127,7 +116,7 @@ function ContextMenuSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className={cn("size-4", "ml-auto")} />
+      <ChevronRightIcon className="ml-auto rtl:rotate-180" />
     </ContextMenuPrimitive.SubTrigger>
   );
 }
@@ -146,31 +135,14 @@ type ContextMenuSubContentProps = ComponentProps<typeof ContextMenuPrimitive.Sub
  */
 function ContextMenuSubContent({ className, ...props }: ContextMenuSubContentProps): JSX.Element {
   return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.SubContent
-        className={cn(
-          "z-50",
-          "min-w-32 overflow-hidden p-1",
-          "rounded-lg border",
-          "bg-popover text-popover-foreground shadow-lg",
-          "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95",
-          "data-open:data-side-top:slide-in-from-bottom-2",
-          "data-open:data-side-right:slide-in-from-left-2",
-          "data-open:data-side-bottom:slide-in-from-top-2",
-          "data-open:data-side-left:slide-in-from-right-2",
-          "data-closed:animate-out data-closed:duration-150 data-closed:fade-out-0 data-closed:zoom-out-95",
-          "data-closed:data-side-top:slide-out-to-bottom-2",
-          "data-closed:data-side-right:slide-out-to-left-2",
-          "data-closed:data-side-bottom:slide-out-to-top-2",
-          "data-closed:data-side-left:slide-out-to-right-2",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          "origin-(--radix-context-menu-content-transform-origin)",
-          className,
-        )}
-        data-slot="context-menu-sub-content"
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.SubContent
+      className={cn(
+        "z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg ease-snappy data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2",
+        className,
+      )}
+      data-slot="context-menu-sub-content"
+      {...props}
+    />
   );
 }
 
@@ -188,20 +160,10 @@ type ContextMenuContentProps = ComponentProps<typeof ContextMenuPrimitive.Conten
  */
 function ContextMenuContent({ className, ...props }: ContextMenuContentProps): JSX.Element {
   return (
-    <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal">
       <ContextMenuPrimitive.Content
         className={cn(
-          "z-50",
-          "max-h-(--radix-context-menu-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto p-1",
-          "rounded-lg border",
-          "bg-popover text-popover-foreground shadow-lg",
-          "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95",
-          "data-open:data-side-top:slide-in-from-bottom-2",
-          "data-open:data-side-right:slide-in-from-left-2",
-          "data-open:data-side-bottom:slide-in-from-top-2",
-          "data-open:data-side-left:slide-in-from-right-2",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          "origin-(--radix-context-menu-content-transform-origin)",
+          "z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 ease-snappy data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:ease-exit",
           className,
         )}
         data-slot="context-menu-content"
@@ -226,29 +188,11 @@ interface ContextMenuItemProps extends ComponentProps<typeof ContextMenuPrimitiv
 /**
  * @since 0.3.16-canary.0
  */
-function ContextMenuItem({
-  className,
-  inset,
-  variant,
-  ...props
-}: ContextMenuItemProps): JSX.Element {
+function ContextMenuItem({ className, inset, variant = "default", ...props }: ContextMenuItemProps): JSX.Element {
   return (
     <ContextMenuPrimitive.Item
       className={cn(
-        "group/context-menu-item relative flex items-center gap-x-2",
-        "px-2 py-1.5",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "aria-disabled:opacity-50",
-        "data-inset:pl-8",
-        "data-[variant=destructive]:text-destructive",
-        "data-[variant=destructive]:focus:bg-destructive/10",
-        "dark:data-[variant=destructive]:focus:bg-destructive/20",
-        "data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "[&_svg:not([class*='text-'])]:text-muted-foreground",
+        "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className,
       )}
       data-inset={inset}
@@ -266,7 +210,9 @@ function ContextMenuItem({
 /**
  * @since 0.3.16-canary.0
  */
-type ContextMenuCheckboxItemProps = ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>;
+interface ContextMenuCheckboxItemProps extends ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> {
+  inset?: boolean;
+}
 
 /**
  * @since 0.3.16-canary.0
@@ -275,28 +221,23 @@ function ContextMenuCheckboxItem({
   checked,
   children,
   className,
+  inset,
   ...props
 }: ContextMenuCheckboxItemProps): JSX.Element {
   return (
     <ContextMenuPrimitive.CheckboxItem
       checked={checked}
       className={cn(
-        "group/context-menu-item relative flex items-center gap-x-2",
-        "py-1.5 pr-2 pl-8",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "aria-disabled:opacity-50",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
+      data-inset={inset}
       data-slot="context-menu-checkbox-item"
       {...props}
     >
-      <span className={cn("absolute flex items-center justify-center", "left-2")}>
+      <span className="pointer-events-none absolute right-2">
         <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+          <CheckIcon />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -311,35 +252,27 @@ function ContextMenuCheckboxItem({
 /**
  * @since 0.3.16-canary.0
  */
-type ContextMenuRadioItemProps = ComponentProps<typeof ContextMenuPrimitive.RadioItem>;
+interface ContextMenuRadioItemProps extends ComponentProps<typeof ContextMenuPrimitive.RadioItem> {
+  inset?: boolean;
+}
 
 /**
  * @since 0.3.16-canary.0
  */
-function ContextMenuRadioItem({
-  children,
-  className,
-  ...props
-}: ContextMenuRadioItemProps): JSX.Element {
+function ContextMenuRadioItem({ children, className, inset, ...props }: ContextMenuRadioItemProps): JSX.Element {
   return (
     <ContextMenuPrimitive.RadioItem
       className={cn(
-        "group/context-menu-item relative flex items-center gap-x-2",
-        "py-1.5 pr-2 pl-8",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "cursor-default select-none",
-        "focus:bg-accent focus:text-accent-foreground",
-        "aria-disabled:opacity-50",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
+      data-inset={inset}
       data-slot="context-menu-radio-item"
       {...props}
     >
-      <span className={cn("absolute flex items-center justify-center", "left-2")}>
+      <span className="pointer-events-none absolute right-2">
         <ContextMenuPrimitive.ItemIndicator>
-          <DotIcon className={cn("size-4", "fill-current")} />
+          <CheckIcon />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}
@@ -364,13 +297,7 @@ interface ContextMenuLabelProps extends ComponentProps<typeof ContextMenuPrimiti
 function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): JSX.Element {
   return (
     <ContextMenuPrimitive.Label
-      className={cn(
-        "flex items-center gap-x-2",
-        "px-2 py-1.5",
-        "text-sm font-semibold",
-        "data-inset:pl-8",
-        className,
-      )}
+      className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className)}
       data-inset={inset}
       data-slot="context-menu-label"
       {...props}
@@ -393,7 +320,7 @@ type ContextMenuSeparatorProps = ComponentProps<typeof ContextMenuPrimitive.Sepa
 function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): JSX.Element {
   return (
     <ContextMenuPrimitive.Separator
-      className={cn("mx-2 my-1 h-px", "bg-border", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       data-slot="context-menu-separator"
       {...props}
     />
@@ -416,9 +343,7 @@ function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps):
   return (
     <span
       className={cn(
-        "ml-auto",
-        "text-xs tracking-widest text-muted-foreground",
-        "group-data-[variant=destructive]/context-menu-item:text-destructive/80",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
         className,
       )}
       data-slot="context-menu-shortcut"
@@ -441,11 +366,7 @@ type ContextMenuArrowProps = ComponentProps<typeof ContextMenuPrimitive.Arrow>;
  */
 function ContextMenuArrow({ className, ...props }: ContextMenuArrowProps): JSX.Element {
   return (
-    <ContextMenuPrimitive.Arrow
-      className={cn("fill-popover", className)}
-      data-slot="context-menu-arrow"
-      {...props}
-    />
+    <ContextMenuPrimitive.Arrow className={cn("fill-popover", className)} data-slot="context-menu-arrow" {...props} />
   );
 }