@nikala-ui/core 0.9.10 → 0.9.11-nightly.78f0a94

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

@@ -0,0 +1,295 @@
+import { splitProps, type JSX, type ValidComponent } from "solid-js";
+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> & {
+    class?: string;
+    children?: JSX.Element;
+    triggerMode?: "input" | "focus" | "both" | "manual";
+  };
+
+/**
+ * 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>
+) => {
+  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 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",
+    "clearable",
+    "onClear",
+  ]);
+
+  return (
+    <ComboboxPrimitive.Control
+      class={cn(
+        "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)}
+    >
+      <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>
+  );
+};
+
+export type ComboboxInputProps<T extends ValidComponent = "input"> =
+  ComboboxPrimitive.ComboboxInputProps<T> & {
+    class?: string;
+    openOnFocus?: boolean;
+  };
+
+/**
+ * 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>
+) => {
+  const [local, rest] = splitProps(props as ComboboxInputProps, ["class", "openOnFocus", "onFocus", "onClick"]);
+
+  return (
+    <ComboboxPrimitive.Input
+      class={cn(
+        "flex-1 bg-transparent py-1 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed text-foreground min-w-16",
+        local.class
+      )}
+      onFocus={(e: FocusEvent) => {
+        if (typeof local.onFocus === "function") local.onFocus(e as any);
+      }}
+      onClick={(e: MouseEvent) => {
+        if (typeof local.onClick === "function") local.onClick(e as any);
+      }}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type ComboboxTriggerProps<T extends ValidComponent = "button"> =
+  ComboboxPrimitive.ComboboxTriggerProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Dropdown chevron trigger icon.
+ */
+export const ComboboxTrigger = <T extends ValidComponent = "button">(
+  props: ComboboxTriggerProps<T>
+) => {
+  const [local, rest] = splitProps(props as ComboboxTriggerProps, ["class"]);
+
+  return (
+    <ComboboxPrimitive.Trigger
+      class={cn(
+        "flex h-4 w-4 items-center justify-center opacity-50 hover:opacity-100 transition-opacity focus:outline-none cursor-pointer",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      <ComboboxPrimitive.Icon
+        as="svg"
+        class="h-4 w-4 stroke-current stroke-2 fill-none"
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+      </ComboboxPrimitive.Icon>
+    </ComboboxPrimitive.Trigger>
+  );
+};
+
+export type ComboboxTokenProps<Option = any> = {
+  class?: string;
+  children?: JSX.Element;
+  item?: Option;
+  onRemove?: () => void;
+};
+
+/**
+ * Selected item tag token pill rendered in multi-select mode.
+ */
+export const ComboboxToken = <Option = any>(props: ComboboxTokenProps<Option>) => {
+  const [local, rest] = splitProps(props, ["class", "children", "onRemove"]);
+
+  return (
+    <span
+      class={cn(
+        "inline-flex items-center gap-1.5 rounded-md bg-accent px-2 py-0.5 text-xs font-medium text-accent-foreground border border-border shadow-2xs animate-in fade-in-50",
+        local.class
+      )}
+      {...rest}
+    >
+      <span class="truncate">{local.children}</span>
+      <button
+        type="button"
+        tabIndex={-1}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (local.onRemove) local.onRemove();
+        }}
+        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"
+      >
+        <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>
+  );
+};
+
+export type ComboboxContentProps<T extends ValidComponent = "div"> =
+  ComboboxPrimitive.ComboboxContentProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Portaled popover content listbox container.
+ */
+export const ComboboxContent = <T extends ValidComponent = "div">(
+  props: ComboboxContentProps<T>
+) => {
+  const [local, rest] = splitProps(props as ComboboxContentProps, ["class"]);
+
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Content
+        class={cn(
+          "relative z-50 min-w-8rem overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md animate-in fade-in-80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
+          local.class
+        )}
+        {...(rest as any)}
+      >
+        <ComboboxPrimitive.Listbox class="max-h-60 overflow-y-auto p-1 outline-none" />
+      </ComboboxPrimitive.Content>
+    </ComboboxPrimitive.Portal>
+  );
+};
+
+export type ComboboxItemProps<T extends ValidComponent = "li"> =
+  ComboboxPrimitive.ComboboxItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Individual option item inside listbox supporting custom avatars, icons, and titles.
+ */
+export const ComboboxItem = <T extends ValidComponent = "li">(
+  props: ComboboxItemProps<T>
+) => {
+  const [local, rest] = splitProps(props as ComboboxItemProps, ["class", "children"]);
+
+  return (
+    <ComboboxPrimitive.Item
+      class={cn(
+        "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}
+    >
+      <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.Item>
+  );
+};
+
+export type ComboboxGroupProps<T extends ValidComponent = "li"> =
+  ComboboxPrimitive.ComboboxSectionProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+    label?: JSX.Element;
+  };
+
+/**
+ * Group container for organizing related options.
+ */
+export const ComboboxGroup = <T extends ValidComponent = "li">(
+  props: ComboboxGroupProps<T>
+) => {
+  const [local, rest] = splitProps(props as ComboboxGroupProps, ["class", "children", "label"]);
+
+  return (
+    <ComboboxPrimitive.Section class={cn("px-1 py-1", local.class)} {...(rest as any)}>
+      {local.label && (
+        <span class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider block">
+          {local.label}
+        </span>
+      )}
+      {local.children}
+    </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

@@ -21,6 +21,10 @@ import { List, ListGroup, ListHeader, ListItem, type ListItemProps } from "../ui
 interface CommandContextValue {
   search: Accessor<string>;
   setSearch: (value: string) => void;
+  activeIndex: Accessor<number>;
+  setActiveIndex: (fn: (prev: number) => number) => void;
+  registerItemIndex: (element: HTMLElement) => number;
+  onItemSelect: (index: number, action?: () => void) => void;
 }
 
 const CommandContext = createContext<CommandContextValue>();
@@ -34,24 +38,96 @@ export const useCommand = () => {
 };
 
 /* --- Root Command Container --- */
-export interface CommandProps extends JSX.HTMLAttributes<HTMLDivElement> {
+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 containerRef: HTMLDivElement | undefined;
+  let itemsList: HTMLElement[] = [];
+
+  const registerItemIndex = (element: HTMLElement) => {
+    if (!itemsList.includes(element)) {
+      itemsList.push(element);
+    }
+    return itemsList.indexOf(element);
+  };
+
+  const onItemSelect = (index: number, action?: () => void) => {
+    setActiveIndex(index);
+    if (action) action();
+  };
+
+  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();
+      const next = (activeIndex() + 1) % visible.length;
+      setActiveIndex(next);
+      updateActiveAttribute(next);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prev = (activeIndex() - 1 + visible.length) % visible.length;
+      setActiveIndex(prev);
+      updateActiveAttribute(prev);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const current = visible[activeIndex()];
+      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 +138,7 @@ export interface CommandDialogProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   enableHotkey?: boolean;
-  children?: JSX.Element;
+  children?: JSX.Element | ((ctx: CommandContextValue) => JSX.Element);
   class?: string;
 }
 
@@ -120,6 +196,7 @@ export const CommandInput: Component<CommandInputProps> = (props) => {
       </InputGroupAddon>
 
       <InputGroupInput
+        ref={(el) => setTimeout(() => el.focus(), 50)}
         value={search()}
         onInput={(e) => {
           setSearch(e.currentTarget.value);
@@ -200,6 +277,7 @@ export interface CommandItemProps extends ListItemProps {
 }
 
 export const CommandItem: Component<CommandItemProps> = (props) => {
+  let itemRef: HTMLDivElement | undefined;
   const [local, rest] = splitProps(props, [
     "title",
     "subtitle",
@@ -208,7 +286,7 @@ export const CommandItem: Component<CommandItemProps> = (props) => {
     "onClick",
     "class",
   ]);
-  const { search } = useCommand();
+  const { search, activeIndex } = useCommand();
 
   /* Auto fuzzy-filter item based on search query */
   const matchesSearch = () => {
@@ -236,10 +314,15 @@ export const CommandItem: Component<CommandItemProps> = (props) => {
   return (
     <Show when={matchesSearch()}>
       <ListItem
+        ref={itemRef}
+        data-command-item="true"
         title={local.title}
         subtitle={local.subtitle}
         onClick={handleClick}
-        class={local.class}
+        class={cn(
+          "aria-selected:bg-accent aria-selected:text-accent-foreground cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground",
+          local.class
+        )}
         {...rest}
       />
     </Show>

package/src/registry/components/ui/hover-card.tsx

@@ -0,0 +1,105 @@
+import { splitProps, type JSX, type ValidComponent } from "solid-js";
+import * as HoverCardPrimitive from "@kobalte/core/hover-card";
+import { cn } from "@/lib/cn";
+
+export type HoverCardProps = HoverCardPrimitive.HoverCardRootProps;
+
+/**
+ * Root HoverCard component built on Kobalte primitives.
+ * Controls hover open/close delays (default: 200ms / 150ms).
+ */
+export const HoverCard = (props: HoverCardProps) => {
+  return (
+    <HoverCardPrimitive.Root
+      openDelay={200}
+      closeDelay={150}
+      {...props}
+    />
+  );
+};
+
+export type HoverCardTriggerProps<T extends ValidComponent = "a"> =
+  HoverCardPrimitive.HoverCardTriggerProps<T> &
+    JSX.AnchorHTMLAttributes<HTMLAnchorElement> & {
+      class?: string;
+      children?: JSX.Element;
+    };
+
+/**
+ * HoverCard trigger handle (link, avatar, or text).
+ */
+export const HoverCardTrigger = <T extends ValidComponent = "a">(
+  props: HoverCardTriggerProps<T>
+) => {
+  const [local, rest] = splitProps(props as HoverCardTriggerProps, [
+    "class",
+    "children",
+  ]);
+
+  return (
+    <HoverCardPrimitive.Trigger
+      class={cn(
+        "inline-flex items-center text-sm font-medium text-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      {local.children}
+    </HoverCardPrimitive.Trigger>
+  );
+};
+
+export type HoverCardContentProps<T extends ValidComponent = "div"> =
+  HoverCardPrimitive.HoverCardContentProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Floating card preview container rendered in a portal layer.
+ * Includes offset spacing from trigger and support for optional HoverCardArrow.
+ */
+export const HoverCardContent = <T extends ValidComponent = "div">(
+  props: HoverCardContentProps<T>
+) => {
+  const [local, rest] = splitProps(props as HoverCardContentProps, [
+    "class",
+    "children",
+  ]);
+
+  return (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        sideOffset={8}
+        class={cn(
+          "z-50 w-80 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none transition-all 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          local.class
+        )}
+        {...(rest as any)}
+      >
+        {local.children}
+      </HoverCardPrimitive.Content>
+    </HoverCardPrimitive.Portal>
+  );
+};
+
+export type HoverCardArrowProps<T extends ValidComponent = "div"> =
+  HoverCardPrimitive.HoverCardArrowProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Optional arrow pointer pointing to the trigger.
+ */
+export const HoverCardArrow = <T extends ValidComponent = "div">(
+  props: HoverCardArrowProps<T>
+) => {
+  const [local, rest] = splitProps(props as HoverCardArrowProps, ["class"]);
+
+  return (
+    <HoverCardPrimitive.Arrow
+      class={cn("fill-popover stroke-border stroke-1", local.class)}
+      {...(rest as any)}
+    />
+  );
+};