@nikala-ui/core 0.11.0 → 0.12.0

package/src/registry/components/ui/code-block.tsx

@@ -0,0 +1,326 @@
+import {
+  createSignal,
+  createEffect,
+  createMemo,
+  splitProps,
+  For,
+  Show,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import { Check, Copy } from "lucide-solid";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+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 CodeBlockPackageManager = "bunx" | "npx" | "pnpm" | "yarn";
+
+export interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The raw source code text to display and copy */
+  code?: string;
+  /** File name to display in the header bar (e.g. "App.tsx", "main.rs") */
+  filename?: string;
+  /** Programming language badge (e.g. "tsx", "rust", "bash") */
+  language?: string;
+  /** Alias for language */
+  lang?: string;
+  /** Whether the code snippet is an executable CLI command */
+  isCli?: boolean;
+  /** Shows the interactive package manager runner tabs (bunx, npx, pnpm, yarn) */
+  showPmSwitcher?: boolean;
+  /** List of package manager runners to show */
+  managers?: CodeBlockPackageManager[];
+  /** Whether the copy button is enabled. Defaults to true. */
+  copyable?: boolean;
+  class?: string;
+}
+
+let shikiHighlighterPromise: Promise<any> | null = null;
+
+async function getShikiHighlighter() {
+  if (typeof window === "undefined") return null;
+  if (!shikiHighlighterPromise) {
+    try {
+      const { createHighlighter } = await import("shiki");
+      shikiHighlighterPromise = createHighlighter({
+        themes: ["github-dark", "github-light"],
+        langs: [
+          "typescript",
+          "javascript",
+          "tsx",
+          "jsx",
+          "bash",
+          "json",
+          "css",
+          "html",
+          "rust",
+        ],
+      });
+    } catch (e) {
+      console.warn("Failed to load Shiki highlighter", e);
+      return null;
+    }
+  }
+  return shikiHighlighterPromise;
+}
+
+function highlightCliCommand(code: string): string {
+  const trimmed = code.trim();
+  const parts = trimmed.split(/\s+/);
+  if (parts.length === 0) return code;
+
+  const isRunner = ["bunx", "npx", "pnpm", "yarn", "bun", "npm", "cargo", "deno"].includes(parts[0]);
+  if (!isRunner) return `<span class="text-foreground">${escapeHtml(trimmed)}</span>`;
+
+  return parts
+    .map((part, index) => {
+      if (index === 0) {
+        return `<span class="text-amber-500 dark:text-amber-400 font-bold">${escapeHtml(part)}</span>`;
+      }
+      if (part.startsWith("-")) {
+        return `<span class="text-purple-400 dark:text-purple-300">${escapeHtml(part)}</span>`;
+      }
+      if (part.startsWith("@")) {
+        return `<span class="text-emerald-400 dark:text-emerald-300 font-medium">${escapeHtml(part)}</span>`;
+      }
+      if (index === 1 && ["add", "install", "init", "create", "run"].includes(part)) {
+        return `<span class="text-sky-500 dark:text-sky-400 font-medium">${escapeHtml(part)}</span>`;
+      }
+      return `<span class="text-foreground/90">${escapeHtml(part)}</span>`;
+    })
+    .join(" ");
+}
+
+function transformCommandForPm(cmd: string, pm: CodeBlockPackageManager): string {
+  const trimmed = cmd.trim();
+  const runners = ["bunx", "npx", "pnpm dlx", "pnpm", "yarn dlx", "yarn", "bun", "npm"];
+
+  let base = trimmed;
+  for (const r of runners) {
+    if (trimmed.startsWith(r)) {
+      base = trimmed.slice(r.length).trim();
+      break;
+    }
+  }
+
+  switch (pm) {
+    case "bunx":
+      return `bunx ${base}`;
+    case "npx":
+      return `npx ${base}`;
+    case "pnpm":
+      return `pnpm dlx ${base}`;
+    case "yarn":
+      return `yarn dlx ${base}`;
+    default:
+      return `${pm} ${base}`;
+  }
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+export const CodeBlock: ParentComponent<CodeBlockProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "id",
+    "code",
+    "filename",
+    "language",
+    "lang",
+    "isCli",
+    "showPmSwitcher",
+    "managers",
+    "copyable",
+    "class",
+    "children",
+  ]);
+
+  const clipboard = createClipboard();
+  const [activePm, setActivePm] = createSignal<CodeBlockPackageManager>("bunx");
+  const [highlightedHtml, setHighlightedHtml] = createSignal("");
+
+  const effectiveLang = () => (local.lang || local.language || "tsx").toLowerCase();
+  const copyable = () => local.copyable ?? true;
+  const defaultManagers: CodeBlockPackageManager[] = ["bunx", "npx", "pnpm", "yarn"];
+  const managersList = () => local.managers || defaultManagers;
+
+  const isBashCli = () => {
+    const l = effectiveLang();
+    return l === "bash" || l === "sh" || l === "shell" || Boolean(local.isCli);
+  };
+
+  const cleanCode = createMemo(() => {
+    const raw = (local.code || "").trim();
+    if (local.isCli || local.showPmSwitcher) {
+      return transformCommandForPm(raw, activePm());
+    }
+    return raw;
+  });
+
+  createEffect(() => {
+    const codeStr = cleanCode();
+    const lang = effectiveLang();
+
+    if (isBashCli()) {
+      setHighlightedHtml(highlightCliCommand(codeStr));
+      return;
+    }
+
+    if (!codeStr) {
+      setHighlightedHtml("");
+      return;
+    }
+
+    // Attempt Shiki highlighting
+    getShikiHighlighter().then((highlighter) => {
+      if (highlighter) {
+        try {
+          const html = highlighter.codeToHtml(codeStr, {
+            lang: lang === "js" ? "javascript" : lang === "ts" ? "typescript" : lang,
+            themes: {
+              light: "github-light",
+              dark: "github-dark",
+            },
+          });
+          setHighlightedHtml(html);
+          return;
+        } catch (err) {
+          console.warn(`Shiki failed for language: ${lang}`, err);
+        }
+      }
+      // Fallback
+      setHighlightedHtml(`<pre class="text-foreground/90"><code>${escapeHtml(codeStr)}</code></pre>`);
+    });
+  });
+
+  const handleCopy = async () => {
+    let textToCopy = cleanCode();
+    if (!textToCopy && typeof window !== "undefined") {
+      const target = document.querySelector(`[data-code-block-id="${local.id}"]`);
+      if (target) textToCopy = target.textContent || "";
+    }
+
+    if (!textToCopy) return;
+    await clipboard.copy(textToCopy);
+  };
+
+  const shouldShowSwitcher = () => Boolean(local.showPmSwitcher || local.isCli);
+  const hasHeader = () => Boolean(shouldShowSwitcher() || local.filename || effectiveLang());
+
+  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}
+    >
+      {/* Code Header Bar */}
+      <Show when={hasHeader()}>
+        <div class="flex h-9 items-center justify-between border-b border-border/70 bg-muted/70 px-3.5 text-xs text-muted-foreground select-none">
+          <div class="flex items-center gap-2">
+            <Show when={shouldShowSwitcher()}>
+              <Tabs
+                value={activePm()}
+                onChange={(val) => setActivePm(val as CodeBlockPackageManager)}
+                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>
+            </Show>
+
+            <Show when={local.filename}>
+              <span class="font-medium text-foreground tracking-tight">{local.filename}</span>
+            </Show>
+
+            <Show when={effectiveLang() && !shouldShowSwitcher() && !local.filename}>
+              <Badge variant="outline" class="uppercase text-[10px] px-1.5 py-0 h-4 font-mono font-semibold">
+                {effectiveLang()}
+              </Badge>
+            </Show>
+          </div>
+
+          <Show when={copyable() && (local.code || cleanCode())}>
+            <Tooltip>
+              <TooltipTrigger
+                as={Button}
+                variant="ghost"
+                size="icon"
+                onClick={handleCopy}
+                aria-label={clipboard.copied() ? "Copied code" : "Copy code"}
+                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 code"}
+              </TooltipContent>
+            </Tooltip>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Floating Copy Button (if no header bar is present) */}
+      <Show when={!hasHeader() && copyable() && (local.code || cleanCode())}>
+        <div class="absolute right-2.5 top-2.5 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+          <Tooltip>
+            <TooltipTrigger
+              as={Button}
+              variant="outline"
+              size="icon"
+              onClick={handleCopy}
+              aria-label={clipboard.copied() ? "Copied code" : "Copy code"}
+              class="size-7 rounded-md border-border/80 bg-background/90 text-muted-foreground backdrop-blur-xs hover:bg-muted hover:text-foreground cursor-pointer shadow-2xs"
+            >
+              <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 code"}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </Show>
+
+      {/* Code Container */}
+      <div class="overflow-x-auto p-4 text-[13px] leading-relaxed [scrollbar-width:thin]">
+        <Show
+          when={local.children}
+          fallback={
+            <div
+              class="font-mono text-sm leading-relaxed overflow-x-auto [&>pre]:!bg-transparent [&>pre]:!p-0 [&>pre]:!m-0 [&>pre]:!border-none"
+              innerHTML={highlightedHtml() || `<pre class="text-foreground/90"><code>${escapeHtml(cleanCode())}</code></pre>`}
+            />
+          }
+        >
+          <pre class="shiki nikala-code-block m-0 overflow-x-auto bg-transparent p-0 font-mono text-xs">
+            {local.children}
+          </pre>
+        </Show>
+      </div>
+    </div>
+  );
+};

package/src/registry/components/ui/code-group.tsx

@@ -0,0 +1,105 @@
+import {
+  splitProps,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@/components/ui/tabs";
+import { cn } from "@/lib/cn";
+
+export interface CodeGroupProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Controlled active tab value */
+  value?: string;
+  /** Default active tab value */
+  defaultValue?: string;
+  /** Callback fired when active tab changes */
+  onChange?: (value: string) => void;
+  class?: string;
+}
+
+/**
+ * Tabbed code container composed directly from Nikala UI Tabs primitives.
+ */
+export const CodeGroup: ParentComponent<CodeGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "defaultValue",
+    "onChange",
+    "class",
+    "children",
+  ]);
+
+  return (
+    <Tabs
+      value={local.value}
+      defaultValue={local.defaultValue}
+      onChange={local.onChange}
+      class={cn(
+        "my-4 w-full gap-0 overflow-hidden rounded-lg border border-border bg-muted/40 font-mono text-sm shadow-2xs",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </Tabs>
+  );
+};
+
+export interface CodeGroupListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const CodeGroupList: ParentComponent<CodeGroupListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <div class={cn("flex h-9 items-center justify-between border-b border-border/70 bg-muted/70 px-3 select-none", local.class)}>
+      <TabsList class="h-auto bg-background/60 p-0.5 border border-border/50 gap-0.5 rounded-md" {...rest}>
+        {local.children}
+      </TabsList>
+    </div>
+  );
+};
+
+export interface CodeGroupTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+  class?: string;
+}
+
+export const CodeGroupTrigger: ParentComponent<CodeGroupTriggerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["value", "class", "children"]);
+  return (
+    <TabsTrigger
+      value={local.value}
+      class={cn(
+        "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",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </TabsTrigger>
+  );
+};
+
+export interface CodeGroupContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  class?: string;
+}
+
+export const CodeGroupContent: ParentComponent<CodeGroupContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["value", "class", "children"]);
+  return (
+    <TabsContent
+      value={local.value}
+      class={cn("p-4 text-[13px] leading-relaxed overflow-x-auto m-0 focus-visible:outline-none", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </TabsContent>
+  );
+};

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;