@nikala-ui/core 0.10.1 → 0.11.0-nightly.b01fa01

package/src/registry/components/ui/combobox.tsx

@@ -1,44 +1,88 @@
 import { splitProps, type JSX, type ValidComponent } from "solid-js";
 import { Check, ChevronDown, X } from "lucide-solid";
-import { ScrollArea } from "./scroll-area";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import * as ComboboxPrimitive from "@kobalte/core/combobox";
 import { cn } from "@/lib/cn";
 
 export type ComboboxRootProps<Option = any, OptGroup = any, T extends ValidComponent = "div"> =
-  ComboboxPrimitive.ComboboxRootProps<Option, OptGroup, T>;
+  ComboboxPrimitive.ComboboxRootProps<Option, OptGroup, T> & {
+    class?: string;
+    children?: JSX.Element;
+    triggerMode?: "input" | "focus" | "both" | "manual";
+  };
 
 /**
- * Root Combobox primitive component wrapper.
+ * Root Combobox component providing search, single/multi-selection, and group support.
+ * `triggerMode="focus"` or `triggerMode="both"` enables opening dropdown on input click/focus.
  */
 export const Combobox = <Option = any, OptGroup = any, T extends ValidComponent = "div">(
   props: ComboboxRootProps<Option, OptGroup, T>
 ) => {
-  return <ComboboxPrimitive.Root {...props} />;
+  const [local, rest] = splitProps(props as ComboboxRootProps, ["class", "children", "triggerMode"]);
+
+  return (
+    <ComboboxPrimitive.Root
+      triggerMode={local.triggerMode ?? "input"}
+      class={cn("relative w-full", local.class)}
+      {...(rest as any)}
+    >
+      {local.children}
+    </ComboboxPrimitive.Root>
+  );
 };
 
 export type ComboboxControlProps<Option = any, T extends ValidComponent = "div"> =
   ComboboxPrimitive.ComboboxControlProps<Option, T> & {
     class?: string;
     children?: JSX.Element;
+    clearable?: boolean;
+    onClear?: () => void;
   };
 
 /**
- * Input container box supporting single or multi-select tokens.
+ * Input container for Combobox supporting search input, selected tags, and clear button.
  */
 export const ComboboxControl = <Option = any, T extends ValidComponent = "div">(
   props: ComboboxControlProps<Option, T>
 ) => {
-  const [local, rest] = splitProps(props as ComboboxControlProps, ["class", "children"]);
+  const [local, rest] = splitProps(props as ComboboxControlProps, [
+    "class",
+    "children",
+    "clearable",
+    "onClear",
+  ]);
 
   return (
     <ComboboxPrimitive.Control
       class={cn(
-        "flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-muted px-3 py-1.5 text-sm shadow-2xs ring-offset-background focus-within:ring-1 focus-within:ring-primary focus-within:border-primary disabled:cursor-not-allowed disabled:opacity-50 text-foreground cursor-text transition-colors",
+        "flex min-h-9 w-full flex-wrap items-center justify-between rounded-md border border-input bg-muted px-3 py-1 text-sm shadow-sm transition-colors focus-within:ring-1 focus-within:ring-primary focus-within:border-primary disabled:cursor-not-allowed disabled:opacity-50 gap-1.5 text-foreground",
         local.class
       )}
       {...(rest as any)}
     >
-      {local.children}
+      <div class="flex flex-wrap items-center gap-1.5 flex-1 min-w-0">
+        {local.children}
+      </div>
+
+      <div class="flex items-center gap-1 shrink-0 self-center">
+        {local.clearable && (
+          <button
+            type="button"
+            tabIndex={-1}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (local.onClear) local.onClear();
+            }}
+            class="rounded-sm p-0.5 opacity-60 hover:opacity-100 hover:bg-accent text-foreground transition-opacity focus:outline-none cursor-pointer"
+            aria-label="Clear selection"
+          >
+            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+        <ComboboxTrigger />
+      </div>
     </ComboboxPrimitive.Control>
   );
 };
@@ -50,7 +94,8 @@ export type ComboboxInputProps<T extends ValidComponent = "input"> =
   };
 
 /**
- * Filter search input field.
+ * Search input field embedded within ComboboxControl.
+ * Supports `openOnFocus` to automatically trigger the dropdown when focused or clicked.
  */
 export const ComboboxInput = <T extends ValidComponent = "input">(
   props: ComboboxInputProps<T>
@@ -135,10 +180,12 @@ export const ComboboxToken = <Option = any>(props: ComboboxTokenProps<Option>) =
           e.stopPropagation();
           if (local.onRemove) local.onRemove();
         }}
-        class="rounded-xs opacity-70 hover:opacity-100 focus:outline-none cursor-pointer text-muted-foreground hover:text-foreground"
+        class="rounded-xs p-0.5 hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground transition-colors focus:outline-none cursor-pointer"
+        aria-label="Remove tag"
       >
-        <X class="h-3 w-3" />
-        <span class="sr-only">Remove</span>
+        <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
       </button>
     </span>
   );
@@ -191,17 +238,19 @@ export const ComboboxItem = <T extends ValidComponent = "li">(
   return (
     <ComboboxPrimitive.Item
       class={cn(
-        "relative flex w-full cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50 text-foreground transition-colors",
+        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground text-popover-foreground transition-colors",
         local.class
       )}
-      {...(rest as any)}
+      {...rest}
     >
-      <ComboboxPrimitive.ItemLabel class="flex-1 truncate">
+      <ComboboxPrimitive.ItemIndicator class="absolute left-2 flex h-4 w-4 items-center justify-center text-primary">
+        <svg class="h-4 w-4 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+      </ComboboxPrimitive.ItemIndicator>
+      <ComboboxPrimitive.ItemLabel class="flex items-center gap-2 w-full truncate">
         {local.children}
       </ComboboxPrimitive.ItemLabel>
-      <ComboboxPrimitive.ItemIndicator class="ml-2 flex h-4 w-4 items-center justify-center text-primary">
-        <Check class="h-4 w-4 stroke-2" />
-      </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
   );
 };
@@ -232,3 +281,19 @@ export const ComboboxGroup = <T extends ValidComponent = "li">(
     </ComboboxPrimitive.Section>
   );
 };
+
+/**
+ * Empty state notice when no matching search items exist.
+ */
+export const ComboboxEmpty = (props: { class?: string; children?: JSX.Element }) => {
+  return (
+    <div class={cn("py-6 text-center text-sm text-muted-foreground", props.class)}>
+      {props.children || "No matching items found."}
+    </div>
+  );
+};
+
+/**
+ * Hidden native select element for form integrations.
+ */
+export const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect;

package/src/registry/components/ui/command.tsx

@@ -9,14 +9,14 @@ import {
   type JSX,
   type Accessor,
 } from "solid-js";
-import { createKeybindings } from "@nikala-ui/hooks";
+import { createKeybindings } from "@/hooks/create-keybindings";
+import { Dialog } from "@kobalte/core/dialog";
 import { Search, ArrowUp, ArrowDown, CornerDownLeft } from "lucide-solid";
 import { cn } from "@/lib/cn";
-import { Kbd, KbdGroup } from "./kbd";
-import { InputGroup, InputGroupInput, InputGroupAddon } from "./input-group";
-import { List, ListGroup, ListHeader, ListItem, type ListItemProps } from "./list";
-import { Dialog, DialogOverlay, DialogContent } from "./dialog";
-import { ScrollArea } from "./scroll-area";
+import { Kbd, KbdGroup } from "../ui/kbd";
+import { InputGroup, InputGroupInput, InputGroupAddon } from "../ui/input-group";
+import { List, ListGroup, ListHeader, ListItem, type ListItemProps } from "../ui/list";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 /* --- Command Context State --- */
 interface CommandContextValue {
@@ -24,8 +24,8 @@ interface CommandContextValue {
   setSearch: (value: string) => void;
   activeIndex: Accessor<number>;
   setActiveIndex: (fn: (prev: number) => number) => void;
-  registerItemIndex: () => number;
-  onItemSelect: (fn: () => void) => void;
+  registerItemIndex: (element: HTMLElement) => number;
+  onItemSelect: (index: number, action?: () => void) => void;
 }
 
 const CommandContext = createContext<CommandContextValue>();
@@ -33,12 +33,12 @@ const CommandContext = createContext<CommandContextValue>();
 export const useCommand = () => {
   const ctx = useContext(CommandContext);
   if (!ctx) {
-    throw new Error("useCommand must be used within a <Command /> root component.");
+    throw new Error("useCommand must be used within a <Command />");
   }
   return ctx;
 };
 
-/* --- Command Root --- */
+/* --- Root Command Container --- */
 export interface CommandProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
   class?: string;
   children?: JSX.Element | ((ctx: CommandContextValue) => JSX.Element);
@@ -48,32 +48,56 @@ export const Command: Component<CommandProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "children"]);
   const [search, setSearch] = createSignal("");
   const [activeIndex, setActiveIndex] = createSignal(0);
-  let itemCounter = 0;
-  const itemCallbacks: Record<number, () => void> = {};
+
   let containerRef: HTMLDivElement | undefined;
+  let itemsList: HTMLElement[] = [];
+
+  const registerItemIndex = (element: HTMLElement) => {
+    if (!itemsList.includes(element)) {
+      itemsList.push(element);
+    }
+    return itemsList.indexOf(element);
+  };
 
-  const registerItemIndex = () => {
-    const idx = itemCounter;
-    itemCounter += 1;
-    return idx;
+  const onItemSelect = (index: number, action?: () => void) => {
+    setActiveIndex(index);
+    if (action) action();
   };
 
-  const onItemSelect = (fn: () => void) => {
-    itemCallbacks[activeIndex()] = fn;
+  const getVisibleItems = () => {
+    if (!containerRef) return [];
+    return Array.from(containerRef.querySelectorAll<HTMLElement>("[data-command-item]:not(.hidden)"));
+  };
+
+  const updateActiveAttribute = (index: number) => {
+    const visible = getVisibleItems();
+    visible.forEach((el, idx) => {
+      if (idx === index) {
+        el.setAttribute("aria-selected", "true");
+        el.scrollIntoView({ block: "nearest" });
+      } else {
+        el.removeAttribute("aria-selected");
+      }
+    });
   };
 
   const handleKeyDown = (e: KeyboardEvent) => {
+    const visible = getVisibleItems();
+    if (visible.length === 0) return;
+
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      setActiveIndex((prev) => Math.min(prev + 1, Math.max(0, itemCounter - 1)));
+      const next = (activeIndex() + 1) % visible.length;
+      setActiveIndex(next);
+      updateActiveAttribute(next);
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActiveIndex((prev) => Math.max(prev - 1, 0));
+      const prev = (activeIndex() - 1 + visible.length) % visible.length;
+      setActiveIndex(prev);
+      updateActiveAttribute(prev);
     } else if (e.key === "Enter") {
       e.preventDefault();
-      const fn = itemCallbacks[activeIndex()];
-      if (fn) fn();
-      const current = containerRef?.querySelector('[data-command-active="true"]') as HTMLElement;
+      const current = visible[activeIndex()];
       if (current) {
         current.click();
       }
@@ -144,12 +168,14 @@ export const CommandDialog: Component<CommandDialogProps> = (props) => {
 
   return (
     <Dialog open={isOpen()} onOpenChange={setOpen}>
-      <DialogOverlay class="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0" />
-      <div class="fixed inset-0 z-50 flex items-start justify-center pt-16 sm:pt-24 px-4">
-        <DialogContent class="w-full max-w-xl rounded-lg border border-border bg-popover text-popover-foreground shadow-2xl outline-none data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 p-0">
-          <Command class={props.class}>{props.children}</Command>
-        </DialogContent>
-      </div>
+      <Dialog.Portal>
+        <Dialog.Overlay class="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0" />
+        <div class="fixed inset-0 z-50 flex items-start justify-center pt-16 sm:pt-24 px-4">
+          <Dialog.Content class="w-full max-w-xl rounded-lg border border-border bg-popover text-popover-foreground shadow-2xl outline-none data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95">
+            <Command class={props.class}>{props.children}</Command>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
     </Dialog>
   );
 };
@@ -257,118 +283,88 @@ export const CommandItem: Component<CommandItemProps> = (props) => {
     "title",
     "subtitle",
     "keywords",
-    "disabled",
     "onSelect",
+    "onClick",
     "class",
-    "children",
   ]);
+  const { search, activeIndex } = useCommand();
 
-  const ctx = useCommand();
-  const index = ctx.registerItemIndex();
-
-  const isActive = () => ctx.activeIndex() === index;
-
-  /* Automatic scroll into view when navigating with Arrow keys */
-  const scrollIntoViewIfNeeded = () => {
-    if (isActive() && itemRef) {
-      itemRef.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    }
-  };
-
-  const isVisible = () => {
-    const query = ctx.search().toLowerCase().trim();
+  /* Auto fuzzy-filter item based on search query */
+  const matchesSearch = () => {
+    const query = search().toLowerCase().trim();
     if (!query) return true;
 
-    const titleStr = typeof local.title === "string" ? local.title.toLowerCase() : "";
-    const subStr = typeof local.subtitle === "string" ? local.subtitle.toLowerCase() : "";
-
-    if (titleStr.includes(query) || subStr.includes(query)) return true;
-
-    if (local.keywords) {
-      return local.keywords.some((k) => k.toLowerCase().includes(query));
-    }
+    const titleMatch = local.title?.toLowerCase().includes(query);
+    const subtitleMatch = local.subtitle?.toLowerCase().includes(query);
+    const keywordMatch = local.keywords?.some((k) =>
+      k.toLowerCase().includes(query)
+    );
 
-    return false;
+    return Boolean(titleMatch || subtitleMatch || keywordMatch);
   };
 
-  const handleSelect = () => {
-    if (local.disabled) return;
-    if (local.onSelect) local.onSelect();
+  const handleClick = (e: MouseEvent) => {
+    if (typeof local.onSelect === "function") {
+      local.onSelect();
+    }
+    if (typeof local.onClick === "function") {
+      local.onClick(e as any);
+    }
   };
 
   return (
-    <Show when={isVisible()}>
+    <Show when={matchesSearch()}>
       <ListItem
-        ref={(el) => {
-          itemRef = el;
-          scrollIntoViewIfNeeded();
-        }}
+        ref={itemRef}
+        data-command-item="true"
         title={local.title}
         subtitle={local.subtitle}
-        data-command-active={isActive() ? "true" : "false"}
+        onClick={handleClick}
         class={cn(
-          "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
-          isActive()
-            ? "bg-accent text-accent-foreground font-medium"
-            : "text-popover-foreground hover:bg-muted/50",
-          local.disabled && "pointer-events-none opacity-50",
+          "aria-selected:bg-accent aria-selected:text-accent-foreground cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground",
           local.class
         )}
-        onClick={handleSelect}
-        onMouseEnter={() => ctx.setActiveIndex(() => index)}
         {...rest}
-      >
-        {local.children}
-      </ListItem>
+      />
     </Show>
   );
 };
 
-/* --- Command Footer Indicator Bar --- */
+/* --- Command Footer --- */
 export interface CommandFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
 }
 
 export const CommandFooter: Component<CommandFooterProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+  const [local, rest] = splitProps(props, ["class"]);
 
   return (
     <div
       class={cn(
-        "flex items-center justify-between border-t border-border px-3 py-2 text-xs text-muted-foreground bg-muted/40",
+        "flex items-center justify-between border-t border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground select-none",
         local.class
       )}
       {...rest}
     >
-      {local.children || (
-        <>
-          <div class="flex items-center gap-2">
-            <span class="inline-flex items-center gap-1">
-              <KbdGroup>
-                <Kbd size="sm">
-                  <ArrowUp class="w-2.5 h-2.5" />
-                </Kbd>
-                <Kbd size="sm">
-                  <ArrowDown class="w-2.5 h-2.5" />
-                </Kbd>
-              </KbdGroup>
-              <span>Navigate</span>
-            </span>
-
-            <span class="inline-flex items-center gap-1">
-              <Kbd size="sm">
-                <CornerDownLeft class="w-2.5 h-2.5" />
-              </Kbd>
-              <span>Select</span>
-            </span>
-          </div>
-
-          <span class="inline-flex items-center gap-1">
-            <Kbd size="sm">ESC</Kbd>
-            <span>Close</span>
-          </span>
-        </>
-      )}
+      <div class="flex items-center gap-3">
+        <span class="flex items-center gap-1">
+          <KbdGroup>
+            <Kbd size="sm"><ArrowUp class="w-2.5 h-2.5" /></Kbd>
+            <Kbd size="sm"><ArrowDown class="w-2.5 h-2.5" /></Kbd>
+          </KbdGroup>
+          <span>Navigate</span>
+        </span>
+
+        <span class="flex items-center gap-1">
+          <Kbd size="sm"><CornerDownLeft class="w-2.5 h-2.5" /></Kbd>
+          <span>Select</span>
+        </span>
+      </div>
+
+      <span class="flex items-center gap-1">
+        <Kbd size="sm">Esc</Kbd>
+        <span>Close</span>
+      </span>
     </div>
   );
 };

package/src/registry/components/ui/context-menu.tsx

@@ -1,21 +1,18 @@
 import { splitProps, type Component, type JSX, type ValidComponent } from "solid-js";
 import * as ContextMenuPrimitive from "@kobalte/core/context-menu";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import { createClickOutside } from "@nikala-ui/hooks";
-import { ScrollArea } from "./scroll-area";
-import { Separator } from "./separator";
-import { Kbd } from "./kbd";
+import { createClickOutside } from "@/hooks/create-click-outside";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Kbd } from "@/components/ui/kbd";
 import { cn } from "@/lib/cn";
 
-export type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuRootProps;
-
-export const ContextMenu: Component<ContextMenuRootProps> = (props) => {
-  return <ContextMenuPrimitive.Root {...props} />;
-};
-
+export const ContextMenu = ContextMenuPrimitive.Root;
 export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 export const ContextMenuGroup = ContextMenuPrimitive.Group;
+export const ContextMenuPortal = ContextMenuPrimitive.Portal;
 export const ContextMenuSub = ContextMenuPrimitive.Sub;
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 export type ContextMenuSubTriggerProps<T extends ValidComponent = "div"> =
   ContextMenuPrimitive.ContextMenuSubTriggerProps<T> & {
@@ -32,7 +29,7 @@ export const ContextMenuSubTrigger = <T extends ValidComponent = "div">(
   return (
     <ContextMenuPrimitive.SubTrigger
       class={cn(
-        "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground text-foreground",
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent text-foreground",
         local.inset && "pl-8",
         local.class
       )}
@@ -126,7 +123,7 @@ export const ContextMenuItem = <T extends ValidComponent = "div">(
   return (
     <ContextMenuPrimitive.Item
       class={cn(
-        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         local.inset && "pl-8",
         local.class
       )}
@@ -151,7 +148,7 @@ export const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
     <ContextMenuPrimitive.CheckboxItem
       checked={local.checked}
       class={cn(
-        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         local.class
       )}
       {...(rest as any)}
@@ -168,25 +165,73 @@ export const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
   );
 };
 
-export interface ContextMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+export type ContextMenuRadioItemProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuRadioItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+export const ContextMenuRadioItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuRadioItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuRadioItemProps, ["class", "children"]);
+
+  return (
+    <ContextMenuPrimitive.RadioItem
+      class={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <svg class="h-2 w-2 fill-current" viewBox="0 0 8 8">
+            <circle cx="4" cy="4" r="3" />
+          </svg>
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {local.children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+};
+
+export interface ContextMenuLabelProps {
   class?: string;
+  inset?: boolean;
   children?: JSX.Element;
 }
 
-export const ContextMenuShortcut: Component<ContextMenuShortcutProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+export const ContextMenuLabel: Component<ContextMenuLabelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "inset", "children"]);
 
   return (
-    <span class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)} {...rest}>
-      <Kbd size="sm">{local.children}</Kbd>
-    </span>
+    <ContextMenuPrimitive.GroupLabel
+      class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", local.inset && "pl-8", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </ContextMenuPrimitive.GroupLabel>
   );
 };
 
-export interface ContextMenuSeparatorProps {
+export const ContextMenuSeparator: Component<{ class?: string }> = (props) => {
+  return <Separator class={cn("-mx-1 my-1", props.class)} />;
+};
+
+export interface ContextMenuShortcutProps {
   class?: string;
+  children?: JSX.Element;
 }
 
-export const ContextMenuSeparator: Component<ContextMenuSeparatorProps> = (props) => {
-  return <Separator class={cn("-mx-1 my-1 h-px bg-border", props.class)} />;
+export const ContextMenuShortcut: Component<ContextMenuShortcutProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <span class={cn("ml-auto pl-4 text-xs tracking-widest text-muted-foreground", local.class)} {...rest}>
+      <Kbd size="sm" variant="outline">
+        {local.children}
+      </Kbd>
+    </span>
+  );
 };