@nikala-ui/core 0.11.0 → 0.12.0

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

@@ -11,7 +11,7 @@ import {
   Show,
 } from "solid-js";
 import { cva, type VariantProps } from "class-variance-authority";
-import { createClickOutside } from "@nikala-ui/hooks";
+import { createClickOutside } from "@/hooks/create-click-outside";
 import { cn } from "@/lib/cn";
 import { ChevronDown } from "lucide-solid";
 
@@ -26,7 +26,7 @@ interface NavigationMenuContextValue {
 
 const NavigationMenuContext = createContext<NavigationMenuContextValue>();
 
-export function useNavigationMenu() {
+function useNavigationMenu() {
   const context = useContext(NavigationMenuContext);
   if (!context) {
     throw new Error("useNavigationMenu must be used within a <NavigationMenu />");

package/src/registry/components/ui/number-input.tsx

@@ -1,9 +1,9 @@
 import { createSignal, onCleanup, splitProps, type Component, type JSX } from "solid-js";
 import { NumberField as KobalteNumberField } from "@kobalte/core/number-field";
 import { Plus, Minus } from "lucide-solid";
-import { Input } from "./input";
-import { Button } from "./button";
-import { createLongPress } from "@nikala-ui/hooks";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { createLongPress } from "@/hooks/create-long-press";
 import { cn } from "@/lib/cn";
 
 export interface NumberInputProps {

package/src/registry/components/ui/package-manager-tabs.tsx

@@ -0,0 +1,226 @@
+import {
+  createSignal,
+  createMemo,
+  splitProps,
+  For,
+  Show,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import { Check, Copy } from "lucide-solid";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+import { createClipboard } from "@/hooks/create-clipboard";
+import { cn } from "@/lib/cn";
+
+export type DefaultPackageManager = "bun" | "pnpm" | "npm" | "yarn" | "bunx" | "npx" | "deno";
+
+export interface PackageManagerTabsProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** List of package managers to show in the switcher tabs */
+  managers?: string[];
+  /** Single CLI command template (e.g. "add @nikala-ui/core", "create @nikala-ui/docs my-app") */
+  command?: string;
+  /** Explicit map of custom commands per manager (e.g. { bun: "bun add foo", npm: "npm i foo" }) */
+  commands?: Record<string, string>;
+  /** Selected manager (controlled) */
+  value?: string;
+  /** Initial selected manager (uncontrolled) */
+  defaultValue?: string;
+  /** Callback fired when the active package manager changes */
+  onChange?: (manager: string) => void;
+  /** Whether to show the copy button in the header */
+  copyable?: boolean;
+  class?: string;
+}
+
+/**
+ * Automatically formats a command string for a specific package manager.
+ */
+function resolvePmCommand(manager: string, command: string): string {
+  const trimmed = command.trim();
+  const pm = manager.toLowerCase();
+
+  // 1. "create" command
+  const createMatch = trimmed.match(/^(?:bun|npm|npx|pnpm|yarn|deno)?\s*create\s+(.*)$/);
+  if (createMatch) {
+    const args = createMatch[1];
+    if (pm === "bun" || pm === "bunx") return `bun create ${args}`;
+    if (pm === "pnpm") return `pnpm create ${args}`;
+    if (pm === "yarn") return `yarn create ${args}`;
+    if (pm === "deno") return `deno run -A npm:create-${args}`;
+    return `npm create ${args}`;
+  }
+
+  // 2. "add" / "install" command
+  const addMatch = trimmed.match(/^(?:bun\s+add|npm\s+i|npm\s+install|pnpm\s+add|yarn\s+add|deno\s+add|add|install|i)\s+(.*)$/);
+  if (addMatch) {
+    const args = addMatch[1];
+    if (pm === "npm") return `npm i ${args}`;
+    if (pm === "pnpm") return `pnpm add ${args}`;
+    if (pm === "yarn") return `yarn add ${args}`;
+    if (pm === "deno") return `deno add ${args}`;
+    return `bun add ${args}`;
+  }
+
+  // 3. CLI runner (e.g. "nikala add button" or "@nikala-ui/cli add button")
+  const runnerMatch = trimmed.match(/^(?:bunx|npx|pnpm\s+dlx|yarn\s+dlx)?\s*(.*)$/);
+  if (runnerMatch) {
+    const rest = runnerMatch[1];
+    if (pm === "npx") return `npx ${rest}`;
+    if (pm === "pnpm") return `pnpm dlx ${rest}`;
+    if (pm === "yarn") return `yarn dlx ${rest}`;
+    if (pm === "bun" || pm === "bunx") return `bunx ${rest}`;
+    return `${pm} ${rest}`;
+  }
+
+  return trimmed;
+}
+
+function highlightCliCommandText(code: string): string {
+  const trimmed = code.trim();
+  if (!trimmed) return "";
+  const parts = trimmed.split(/\s+/);
+
+  let pkgIndex = 1;
+  if ((parts[0] === "pnpm" || parts[0] === "yarn") && parts[1] === "dlx") {
+    pkgIndex = 2;
+  } else if (parts[0] === "bun" && (parts[1] === "create" || parts[1] === "add" || parts[1] === "run")) {
+    pkgIndex = 2;
+  } else if (parts[0] === "npm" && (parts[1] === "create" || parts[1] === "run")) {
+    pkgIndex = 2;
+  }
+
+  const mainPart = parts.slice(0, pkgIndex).join(" ");
+  const restTokens = parts.slice(pkgIndex);
+
+  const highlightedRest = restTokens
+    .map((token) => {
+      if (token.startsWith("-")) {
+        return `<span class="text-amber-500 dark:text-amber-400 font-medium">${token}</span>`;
+      }
+      if (["add", "create", "init", "run", "dev", "build", "set", "theme", "diff", "list"].includes(token)) {
+        return `<span class="text-sky-500 dark:text-sky-400 font-semibold">${token}</span>`;
+      }
+      return `<span class="text-violet-500 dark:text-violet-400 font-medium">${token}</span>`;
+    })
+    .join(" ");
+
+  return `<span class="text-emerald-500 dark:text-emerald-400 font-semibold">${mainPart}</span>${
+    highlightedRest ? " " + highlightedRest : ""
+  }`;
+}
+
+export const PackageManagerTabs: ParentComponent<PackageManagerTabsProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "managers",
+    "command",
+    "commands",
+    "value",
+    "defaultValue",
+    "onChange",
+    "copyable",
+    "class",
+  ]);
+
+  const defaultManagers = ["bun", "pnpm", "npm", "yarn"];
+  const managersList = () => local.managers || defaultManagers;
+
+  const [internalActive, setInternalActive] = createSignal(
+    local.defaultValue || managersList()[0] || "bun"
+  );
+
+  const activeManager = () => local.value ?? internalActive();
+
+  const handleSelect = (pm: string) => {
+    if (local.value === undefined) {
+      setInternalActive(pm);
+    }
+    local.onChange?.(pm);
+  };
+
+  const currentCommand = createMemo(() => {
+    const pm = activeManager();
+    if (local.commands && local.commands[pm]) {
+      return local.commands[pm];
+    }
+    if (local.command) {
+      return resolvePmCommand(pm, local.command);
+    }
+    return "";
+  });
+
+  const clipboard = createClipboard();
+  const copyable = () => local.copyable ?? true;
+
+  const handleCopy = async () => {
+    const text = currentCommand();
+    if (!text) return;
+    await clipboard.copy(text);
+  };
+
+  return (
+    <div
+      class={cn(
+        "group relative my-4 w-full overflow-hidden rounded-lg border border-border bg-muted/40 font-mono text-sm shadow-2xs",
+        local.class
+      )}
+      {...rest}
+    >
+      {/* Header with Manager Switcher Tabs and Copy Button */}
+      <div class="flex h-9 items-center justify-between border-b border-border/70 bg-muted/70 px-3.5 select-none">
+        {/* Switcher Tabs */}
+        <Tabs
+          value={activeManager()}
+          onChange={handleSelect}
+          class="w-auto flex-none"
+        >
+          <TabsList class="w-auto inline-flex h-auto bg-background/60 p-0.5 border border-border/50 gap-0.5 rounded-md font-mono">
+            <For each={managersList()}>
+              {(pm) => (
+                <TabsTrigger
+                  value={pm}
+                  class="rounded-xs px-2 py-0.5 text-[11px] font-mono transition-colors cursor-pointer data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:font-semibold data-[state=active]:shadow-2xs"
+                >
+                  {pm}
+                </TabsTrigger>
+              )}
+            </For>
+          </TabsList>
+        </Tabs>
+
+        {/* Copy Button */}
+        <Show when={copyable() && currentCommand()}>
+          <Tooltip>
+            <TooltipTrigger
+              as={Button}
+              variant="ghost"
+              size="icon"
+              onClick={handleCopy}
+              aria-label={clipboard.copied() ? "Copied command" : "Copy command"}
+              class="size-6 p-0 rounded-xs text-muted-foreground hover:bg-background hover:text-foreground cursor-pointer"
+            >
+              <Show when={clipboard.copied()} fallback={<Copy class="size-3.5" />}>
+                <Check class="size-3.5 text-emerald-500 dark:text-emerald-400" />
+              </Show>
+            </TooltipTrigger>
+            <TooltipContent class="text-[10px] py-1 px-2">
+              {clipboard.copied() ? "Copied!" : "Copy command"}
+            </TooltipContent>
+          </Tooltip>
+        </Show>
+      </div>
+
+      {/* Command Box Content */}
+      <div class="overflow-x-auto p-4 text-[13px] leading-relaxed [scrollbar-width:thin]">
+        <pre class="font-mono">
+          <code>
+            <span class="text-sky-500 dark:text-sky-400 font-semibold select-none">$ </span>
+            <span innerHTML={highlightCliCommandText(currentCommand())} />
+          </code>
+        </pre>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,102 @@
+import { splitProps, Show, children, type Component, type JSX } from "solid-js";
+import { ChevronLeft, ChevronRight } from "lucide-solid";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { cn } from "@/lib/cn";
+
+export interface PagerItem {
+  title: string;
+  href: string;
+}
+
+export interface PagerLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  title: string;
+  href: string;
+  type: "prev" | "next";
+  class?: string;
+}
+
+/**
+ * Individual Next or Previous page navigation card.
+ */
+export const PagerLink: Component<PagerLinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["title", "href", "type", "class"]);
+
+  const isNext = () => local.type === "next";
+
+  return (
+    <a
+      href={local.href}
+      class={cn(
+        "group block rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        isNext() && "sm:col-start-2",
+        local.class
+      )}
+      {...rest}
+    >
+      <Card class="h-full transition-all group-hover:bg-accent/40 group-hover:shadow-2xs">
+        <CardHeader class={cn("p-4 flex flex-col space-y-1.5", isNext() && "items-end text-right")}>
+          <CardDescription class="flex items-center gap-1 text-xs font-medium text-muted-foreground">
+            <Show when={!isNext()}>
+              <ChevronLeft class="size-3.5 transition-transform group-hover:-translate-x-0.5" />
+              <span>Previous</span>
+            </Show>
+            <Show when={isNext()}>
+              <span>Next</span>
+              <ChevronRight class="size-3.5 transition-transform group-hover:translate-x-0.5" />
+            </Show>
+          </CardDescription>
+          <CardTitle class="text-sm font-semibold tracking-tight group-hover:text-primary transition-colors line-clamp-1">
+            {local.title}
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    </a>
+  );
+};
+
+export interface PagerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Previous documentation page item */
+  prev?: PagerItem | null;
+  /** Next documentation page item */
+  next?: PagerItem | null;
+  class?: string;
+}
+
+/**
+ * Documentation Next / Previous article navigation block composed of Nikala UI Card primitives.
+ */
+export const Pager: Component<PagerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["prev", "next", "class", "children"]);
+  const resolved = children(() => local.children);
+
+  return (
+    <div
+      class={cn("grid grid-cols-1 gap-4 sm:grid-cols-2 mt-10 pt-6 border-t border-border", local.class)}
+      {...rest}
+    >
+      <Show
+        when={resolved()}
+        fallback={
+          <>
+            <Show
+              when={local.prev}
+              fallback={<span class="hidden sm:block" />}
+            >
+              <PagerLink type="prev" title={local.prev!.title} href={local.prev!.href} />
+            </Show>
+            <Show when={local.next}>
+              <PagerLink type="next" title={local.next!.title} href={local.next!.href} />
+            </Show>
+          </>
+        }
+      >
+        {resolved()}
+      </Show>
+    </div>
+  );
+};

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

@@ -1,6 +1,6 @@
 import { splitProps, type Component, type ComponentProps } from "solid-js";
 import { Popover as KobaltePopover } from "@kobalte/core/popover";
-import { createClickOutside } from "@nikala-ui/hooks";
+import { createClickOutside } from "@/hooks/create-click-outside";
 import { X } from "lucide-solid";
 import { cn } from "@/lib/cn";
 

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

@@ -7,7 +7,7 @@ import {
   type JSX,
   type Accessor,
 } from "solid-js";
-import { createElementSize } from "@nikala-ui/hooks";
+import { createElementSize } from "@/hooks/create-resize-observer";
 import { GripVertical, GripHorizontal } from "lucide-solid";
 import { cn } from "@/lib/cn";
 
@@ -66,6 +66,7 @@ export const ResizableGroup: Component<ResizableGroupProps> = (props) => {
       let newLeft = startLeftPct + deltaPct;
       let newRight = startRightPct - deltaPct;
 
+      // Min size limits (10% minimum)
       if (newLeft < 10) {
         newLeft = 10;
         newRight = startLeftPct + startRightPct - 10;
@@ -134,6 +135,7 @@ export const ResizablePanel: Component<ResizablePanelProps> = (props) => {
 
   const currentPct = () => ctx.sizes()[local.id] ?? local.initialSize ?? 50;
 
+  // Utilize Nikala UI createElementSize hook for reactive size inspection
   const containerSize = createElementSize(() => ctx.containerRef());
 
   return (

package/src/registry/components/ui/rich-text-editor/bubble-menu.tsx

@@ -0,0 +1,236 @@
+import {
+  createSignal,
+  createEffect,
+  onCleanup,
+  Show,
+  For,
+  type Component,
+} from "solid-js";
+import { Portal } from "solid-js/web";
+import { useRichTextEditor } from "./editor.js";
+import { ToolbarButton, HIGHLIGHT_PALETTE } from "./toolbar.js";
+import {
+  Bold,
+  Italic,
+  Underline as UnderlineIcon,
+  Strikethrough,
+  Code,
+  Link as LinkIcon,
+  Highlighter,
+  Heading1,
+  Heading2,
+  List,
+  ListTodo,
+} from "lucide-solid";
+
+export const EditorBubbleMenu: Component = () => {
+  const { actions, container, isFullscreen, setShowLinkDialog } = useRichTextEditor();
+  const [isVisible, setIsVisible] = createSignal(false);
+  const [position, setPosition] = createSignal({ top: 0, left: 0 });
+  const [showHighlightPalette, setShowHighlightPalette] = createSignal(false);
+
+  createEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const handleSelectionChange = () => {
+      const ed = actions.editor();
+      const containerEl = container();
+      if (!ed || !ed.isFocused || !ed.isEditable) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      const { from, to } = ed.state.selection;
+      if (from === to || ed.state.selection.empty) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      const range = selection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      // Check that selection is inside the editor view element
+      const editorDom = ed.view.dom;
+      if (!editorDom.contains(range.commonAncestorContainer)) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      if (isFullscreen() && containerEl) {
+        const containerRect = containerEl.getBoundingClientRect();
+        const top = rect.top - containerRect.top - 46;
+        const left = rect.left - containerRect.left + rect.width / 2;
+
+        setPosition({
+          top: Math.max(8, top),
+          left: Math.max(140, Math.min(containerRect.width - 140, left)),
+        });
+      } else {
+        // Normal mode: viewport coordinates
+        setPosition({
+          top: Math.max(12, rect.top - 46),
+          left: Math.max(140, Math.min(window.innerWidth - 140, rect.left + rect.width / 2)),
+        });
+      }
+
+      setIsVisible(true);
+    };
+
+    const handleMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      // If clicking toolbar or any open popovers, hide bubble menu
+      if (
+        target.closest(".editor-popover-trigger") ||
+        target.closest(".editor-popover-content") ||
+        target.closest(".editor-toolbar")
+      ) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+      }
+    };
+
+    document.addEventListener("selectionchange", handleSelectionChange);
+    document.addEventListener("mousedown", handleMouseDown);
+
+    onCleanup(() => {
+      document.removeEventListener("selectionchange", handleSelectionChange);
+      document.removeEventListener("mousedown", handleMouseDown);
+    });
+  });
+
+  const portalTarget = () => {
+    if (typeof document === "undefined") return undefined;
+    return isFullscreen() ? container() || document.body : document.body;
+  };
+
+  return (
+    <Show when={isVisible()}>
+      <Portal mount={portalTarget()}>
+        <div
+          class={`${
+            isFullscreen() ? "absolute" : "fixed"
+          } z-[999999] flex items-center gap-0.5 p-1 rounded-md border border-border bg-popover text-popover-foreground shadow-xl backdrop-blur-md -translate-x-1/2 transition-all duration-75 animate-in fade-in zoom-in-95 pointer-events-auto select-none`}
+          style={{
+            top: `${position().top}px`,
+            left: `${position().left}px`,
+          }}
+        >
+          <ToolbarButton onClick={actions.toggleBold} isActive={actions.isActive("bold")} tooltip="Bold">
+            <Bold class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton onClick={actions.toggleItalic} isActive={actions.isActive("italic")} tooltip="Italic">
+            <Italic class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton onClick={actions.toggleUnderline} isActive={actions.isActive("underline")} tooltip="Underline">
+            <UnderlineIcon class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton onClick={actions.toggleStrike} isActive={actions.isActive("strike")} tooltip="Strikethrough">
+            <Strikethrough class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton onClick={actions.toggleCode} isActive={actions.isActive("code")} tooltip="Code">
+            <Code class="h-3.5 w-3.5" />
+          </ToolbarButton>
+
+          {/* Marker Highlight with Tailwind Palette */}
+          <div class="relative">
+            <ToolbarButton
+              onClick={() => setShowHighlightPalette((p) => !p)}
+              isActive={actions.isActive("highlight")}
+              tooltip="Highlight Color"
+            >
+              <Highlighter class="h-3.5 w-3.5" />
+            </ToolbarButton>
+
+            <Show when={showHighlightPalette()}>
+              <div class="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 z-30 flex flex-col gap-1.5 p-2 bg-popover text-popover-foreground border border-border rounded-lg shadow-2xl min-w-[200px]">
+                <div class="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                  Marker Palette
+                </div>
+                <div class="grid grid-cols-5 gap-1.5">
+                  <For each={HIGHLIGHT_PALETTE}>
+                    {(color) => (
+                      <button
+                        type="button"
+                        title={color.name}
+                        class="h-6 w-6 rounded-md border border-border/60 hover:scale-110 transition-transform cursor-pointer shadow-2xs"
+                        style={{ "background-color": color.value }}
+                        onClick={() => {
+                          actions.toggleHighlight(color.value);
+                          setShowHighlightPalette(false);
+                        }}
+                      />
+                    )}
+                  </For>
+                </div>
+                <button
+                  type="button"
+                  class="w-full text-center py-1 mt-1 text-xs rounded-md bg-muted hover:bg-muted/80 text-foreground transition-colors cursor-pointer font-medium"
+                  onClick={() => {
+                    actions.toggleHighlight();
+                    setShowHighlightPalette(false);
+                  }}
+                >
+                  Clear Highlight
+                </button>
+              </div>
+            </Show>
+          </div>
+
+          <ToolbarButton
+            onClick={() => setShowLinkDialog(true)}
+            isActive={actions.isActive("link")}
+            tooltip="Insert Link"
+          >
+            <LinkIcon class="h-3.5 w-3.5" />
+          </ToolbarButton>
+
+          <div class="h-4 w-px bg-border mx-0.5" />
+
+          <ToolbarButton
+            onClick={() => actions.setHeading(1)}
+            isActive={actions.isActive("heading", { level: 1 })}
+            tooltip="H1"
+          >
+            <Heading1 class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => actions.setHeading(2)}
+            isActive={actions.isActive("heading", { level: 2 })}
+            tooltip="H2"
+          >
+            <Heading2 class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={actions.toggleBulletList}
+            isActive={actions.isActive("bulletList")}
+            tooltip="List"
+          >
+            <List class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={actions.toggleTaskList}
+            isActive={actions.isActive("taskList")}
+            tooltip="Tasks"
+          >
+            <ListTodo class="h-3.5 w-3.5" />
+          </ToolbarButton>
+        </div>
+      </Portal>
+    </Show>
+  );
+};