@nikala-ui/core 0.9.11 → 0.9.12

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

@@ -10,17 +10,22 @@ import {
   type Accessor,
 } from "solid-js";
 import { createKeybindings } from "@nikala-ui/hooks";
-import { Dialog } from "@kobalte/core/dialog";
 import { Search, ArrowUp, ArrowDown, CornerDownLeft } from "lucide-solid";
 import { cn } from "@/lib/cn";
-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 { 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";
 
 /* --- Command Context State --- */
 interface CommandContextValue {
   search: Accessor<string>;
   setSearch: (value: string) => void;
+  activeIndex: Accessor<number>;
+  setActiveIndex: (fn: (prev: number) => number) => void;
+  registerItemIndex: () => number;
+  onItemSelect: (fn: () => void) => void;
 }
 
 const CommandContext = createContext<CommandContextValue>();
@@ -28,30 +33,78 @@ const CommandContext = createContext<CommandContextValue>();
 export const useCommand = () => {
   const ctx = useContext(CommandContext);
   if (!ctx) {
-    throw new Error("useCommand must be used within a <Command />");
+    throw new Error("useCommand must be used within a <Command /> root component.");
   }
   return ctx;
 };
 
-/* --- Root Command Container --- */
-export interface CommandProps extends JSX.HTMLAttributes<HTMLDivElement> {
+/* --- Command Root --- */
+export interface CommandProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
   class?: string;
+  children?: JSX.Element | ((ctx: CommandContextValue) => JSX.Element);
 }
 
 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;
+
+  const registerItemIndex = () => {
+    const idx = itemCounter;
+    itemCounter += 1;
+    return idx;
+  };
+
+  const onItemSelect = (fn: () => void) => {
+    itemCallbacks[activeIndex()] = fn;
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((prev) => Math.min(prev + 1, Math.max(0, itemCounter - 1)));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const fn = itemCallbacks[activeIndex()];
+      if (fn) fn();
+      const current = containerRef?.querySelector('[data-command-active="true"]') as HTMLElement;
+      if (current) {
+        current.click();
+      }
+    }
+  };
+
+  const ctx: CommandContextValue = {
+    search,
+    setSearch: (val) => {
+      setSearch(val);
+      setActiveIndex(0);
+    },
+    activeIndex,
+    setActiveIndex: (fn) => setActiveIndex(fn),
+    registerItemIndex,
+    onItemSelect,
+  };
 
   return (
-    <CommandContext.Provider value={{ search, setSearch }}>
+    <CommandContext.Provider value={ctx}>
       <div
+        ref={containerRef}
+        onKeyDown={handleKeyDown}
         class={cn(
-          "flex flex-col w-full h-full rounded-lg bg-popover text-popover-foreground overflow-hidden border border-border shadow-md",
+          "flex flex-col w-full h-full rounded-lg bg-popover text-popover-foreground overflow-hidden border border-border shadow-md outline-none",
           local.class
         )}
+        tabIndex={0}
         {...rest}
       >
-        {local.children}
+        {typeof local.children === "function" ? (local.children as any)(ctx) : local.children}
       </div>
     </CommandContext.Provider>
   );
@@ -62,7 +115,7 @@ export interface CommandDialogProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   enableHotkey?: boolean;
-  children?: JSX.Element;
+  children?: JSX.Element | ((ctx: CommandContextValue) => JSX.Element);
   class?: string;
 }
 
@@ -91,14 +144,12 @@ export const CommandDialog: Component<CommandDialogProps> = (props) => {
 
   return (
     <Dialog open={isOpen()} onOpenChange={setOpen}>
-      <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>
+      <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>
   );
 };
@@ -120,6 +171,7 @@ export const CommandInput: Component<CommandInputProps> = (props) => {
       </InputGroupAddon>
 
       <InputGroupInput
+        ref={(el) => setTimeout(() => el.focus(), 50)}
         value={search()}
         onInput={(e) => {
           setSearch(e.currentTarget.value);
@@ -144,12 +196,12 @@ export const CommandList: Component<CommandListProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
-    <div
-      class={cn("max-h-82.5 overflow-y-auto p-1.5 scrollbar-thin", local.class)}
+    <ScrollArea
+      class={cn("max-h-82.5 p-1.5", local.class)}
       {...rest}
     >
       <List>{local.children}</List>
-    </div>
+    </ScrollArea>
   );
 };
 
@@ -200,87 +252,123 @@ export interface CommandItemProps extends ListItemProps {
 }
 
 export const CommandItem: Component<CommandItemProps> = (props) => {
+  let itemRef: HTMLDivElement | undefined;
   const [local, rest] = splitProps(props, [
     "title",
     "subtitle",
     "keywords",
+    "disabled",
     "onSelect",
-    "onClick",
     "class",
+    "children",
   ]);
-  const { search } = useCommand();
 
-  /* Auto fuzzy-filter item based on search query */
-  const matchesSearch = () => {
-    const query = search().toLowerCase().trim();
-    if (!query) return true;
+  const ctx = useCommand();
+  const index = ctx.registerItemIndex();
 
-    const titleMatch = local.title?.toLowerCase().includes(query);
-    const subtitleMatch = local.subtitle?.toLowerCase().includes(query);
-    const keywordMatch = local.keywords?.some((k) =>
-      k.toLowerCase().includes(query)
-    );
+  const isActive = () => ctx.activeIndex() === index;
 
-    return Boolean(titleMatch || subtitleMatch || keywordMatch);
+  /* Automatic scroll into view when navigating with Arrow keys */
+  const scrollIntoViewIfNeeded = () => {
+    if (isActive() && itemRef) {
+      itemRef.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
   };
 
-  const handleClick = (e: MouseEvent) => {
-    if (typeof local.onSelect === "function") {
-      local.onSelect();
-    }
-    if (typeof local.onClick === "function") {
-      local.onClick(e as any);
+  const isVisible = () => {
+    const query = ctx.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));
     }
+
+    return false;
+  };
+
+  const handleSelect = () => {
+    if (local.disabled) return;
+    if (local.onSelect) local.onSelect();
   };
 
   return (
-    <Show when={matchesSearch()}>
+    <Show when={isVisible()}>
       <ListItem
+        ref={(el) => {
+          itemRef = el;
+          scrollIntoViewIfNeeded();
+        }}
         title={local.title}
         subtitle={local.subtitle}
-        onClick={handleClick}
-        class={local.class}
+        data-command-active={isActive() ? "true" : "false"}
+        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",
+          local.class
+        )}
+        onClick={handleSelect}
+        onMouseEnter={() => ctx.setActiveIndex(() => index)}
         {...rest}
-      />
+      >
+        {local.children}
+      </ListItem>
     </Show>
   );
 };
 
-/* --- Command Footer --- */
+/* --- Command Footer Indicator Bar --- */
 export interface CommandFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
 }
 
 export const CommandFooter: Component<CommandFooterProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
     <div
       class={cn(
-        "flex items-center justify-between border-t border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground select-none",
+        "flex items-center justify-between border-t border-border px-3 py-2 text-xs text-muted-foreground bg-muted/40",
         local.class
       )}
       {...rest}
     >
-      <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>
+      {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>
   );
 };

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

@@ -0,0 +1,192 @@
+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 { cn } from "@/lib/cn";
+
+export type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuRootProps;
+
+export const ContextMenu: Component<ContextMenuRootProps> = (props) => {
+  return <ContextMenuPrimitive.Root {...props} />;
+};
+
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+export const ContextMenuGroup = ContextMenuPrimitive.Group;
+export const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+export type ContextMenuSubTriggerProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuSubTriggerProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+    inset?: boolean;
+  };
+
+export const ContextMenuSubTrigger = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuSubTriggerProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuSubTriggerProps, ["class", "children", "inset"]);
+
+  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",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      {local.children}
+      <svg class="ml-auto h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </ContextMenuPrimitive.SubTrigger>
+  );
+};
+
+export type ContextMenuSubContentProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuSubContentProps<T> & {
+    class?: string;
+  };
+
+export const ContextMenuSubContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuSubContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuSubContentProps, ["class"]);
+
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        class={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md transition-all animate-in fade-in-80 slide-in-from-top-1",
+          local.class
+        )}
+        {...(rest as any)}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+};
+
+export type ContextMenuContentProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuContentProps<T> & {
+    class?: string;
+    ref?: (el: HTMLElement) => void;
+    children?: JSX.Element;
+  };
+
+export const ContextMenuContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuContentProps, ["class", "ref", "children"]);
+  let menuRef: HTMLElement | undefined;
+
+  createClickOutside({
+    target: () => menuRef,
+    onInteractOutside: () => {
+      // Automatic portal dismiss on outside click
+    },
+  });
+
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        ref={(el) => {
+          menuRef = el;
+          if (typeof local.ref === "function") local.ref(el);
+        }}
+        class={cn(
+          "z-50 min-w-[8rem] rounded-md border border-border bg-popover text-popover-foreground shadow-md transition-all animate-in fade-in-80 slide-in-from-top-1 max-h-72 flex flex-col",
+          local.class
+        )}
+        {...(rest as any)}
+      >
+        <ScrollArea class="max-h-72 w-full rounded-[inherit]">
+          <div class="p-1">
+            {local.children}
+          </div>
+        </ScrollArea>
+      </ContextMenuPrimitive.Content>
+    </ContextMenuPrimitive.Portal>
+  );
+};
+
+export type ContextMenuItemProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuItemProps<T> & {
+    class?: string;
+    inset?: boolean;
+  };
+
+export const ContextMenuItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuItemProps, ["class", "inset"]);
+
+  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",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type ContextMenuCheckboxItemProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuCheckboxItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+    checked?: boolean;
+  };
+
+export const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuCheckboxItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuCheckboxItemProps, ["class", "children", "checked"]);
+
+  return (
+    <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",
+        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-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+          </svg>
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {local.children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+};
+
+export interface ContextMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ContextMenuShortcut: Component<ContextMenuShortcutProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <span class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)} {...rest}>
+      <Kbd size="sm">{local.children}</Kbd>
+    </span>
+  );
+};
+
+export interface ContextMenuSeparatorProps {
+  class?: string;
+}
+
+export const ContextMenuSeparator: Component<ContextMenuSeparatorProps> = (props) => {
+  return <Separator class={cn("-mx-1 my-1 h-px bg-border", props.class)} />;
+};