@nikala-ui/docs 0.12.0

package/dist/vendor/core-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/dist/vendor/core-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/dist/vendor/core-src/registry/components/ui/pagination.tsx

@@ -0,0 +1,258 @@
+import { splitProps, type Component, type JSX, type ParentComponent, Show } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal } from "lucide-solid";
+
+/* --- 1. Button Variants for Pagination Links --- */
+export const paginationButtonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:font-bold data-[active=true]:shadow-2xs",
+        outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground data-[active=true]:border-primary data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:font-bold",
+        ghost: "hover:bg-accent/80 hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-foreground data-[active=true]:font-bold",
+        flat: "hover:bg-muted/80 data-[active=true]:bg-muted data-[active=true]:text-foreground data-[active=true]:font-bold",
+      },
+      size: {
+        default: "h-9 min-w-9 px-3 text-sm",
+        sm: "h-8 min-w-8 px-2 text-xs",
+        lg: "h-10 min-w-10 px-4 text-base",
+        icon: "h-9 w-9 p-0 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+/* --- 2. Pagination Root --- */
+export interface PaginationProps extends JSX.HTMLAttributes<HTMLElement> {
+  class?: string;
+}
+
+export const Pagination: ParentComponent<PaginationProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      class={cn("mx-auto flex w-full justify-center", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </nav>
+  );
+};
+
+/* --- 3. PaginationContent --- */
+export interface PaginationContentProps extends JSX.HTMLAttributes<HTMLUListElement> {
+  class?: string;
+}
+
+export const PaginationContent: ParentComponent<PaginationContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <ul
+      class={cn("flex flex-row items-center gap-1 flex-wrap", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </ul>
+  );
+};
+
+/* --- 4. PaginationItem --- */
+export interface PaginationItemProps extends JSX.HTMLAttributes<HTMLLIElement> {
+  class?: string;
+}
+
+export const PaginationItem: ParentComponent<PaginationItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <li class={cn("", local.class)} {...rest}>
+      {local.children}
+    </li>
+  );
+};
+
+/* --- 5. PaginationLink --- */
+export interface PaginationLinkProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof paginationButtonVariants> {
+  isActive?: boolean;
+  class?: string;
+}
+
+export const PaginationLink: ParentComponent<PaginationLinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant", "size", "isActive", "children"]);
+
+  return (
+    <button
+      type="button"
+      aria-current={local.isActive ? "page" : undefined}
+      data-active={local.isActive ? "true" : "false"}
+      class={cn(
+        paginationButtonVariants({
+          variant: local.variant,
+          size: local.size,
+        }),
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+};
+
+/* --- 6. PaginationPrevious --- */
+export interface PaginationPreviousProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof paginationButtonVariants> {
+  class?: string;
+  hideText?: boolean;
+}
+
+export const PaginationPrevious: Component<PaginationPreviousProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant", "size", "hideText"]);
+
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      variant={local.variant}
+      size={local.size}
+      class={cn("gap-1 pl-2.5", local.hideText && "p-0 min-w-8", local.class)}
+      {...rest}
+    >
+      <ChevronLeft class="size-4" />
+      <Show when={!local.hideText}>
+        <span>Previous</span>
+      </Show>
+    </PaginationLink>
+  );
+};
+
+/* --- 7. PaginationNext --- */
+export interface PaginationNextProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof paginationButtonVariants> {
+  class?: string;
+  hideText?: boolean;
+}
+
+export const PaginationNext: Component<PaginationNextProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant", "size", "hideText"]);
+
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      variant={local.variant}
+      size={local.size}
+      class={cn("gap-1 pr-2.5", local.hideText && "p-0 min-w-8", local.class)}
+      {...rest}
+    >
+      <Show when={!local.hideText}>
+        <span>Next</span>
+      </Show>
+      <ChevronRight class="size-4" />
+    </PaginationLink>
+  );
+};
+
+/* --- 8. PaginationFirst --- */
+export interface PaginationFirstProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof paginationButtonVariants> {
+  class?: string;
+  hideText?: boolean;
+}
+
+export const PaginationFirst: Component<PaginationFirstProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant", "size", "hideText"]);
+
+  return (
+    <PaginationLink
+      aria-label="Go to first page"
+      variant={local.variant}
+      size={local.size}
+      class={cn("gap-1 p-0 min-w-8", local.class)}
+      {...rest}
+    >
+      <ChevronsLeft class="size-4" />
+      <Show when={!local.hideText}>
+        <span class="sr-only">First page</span>
+      </Show>
+    </PaginationLink>
+  );
+};
+
+/* --- 9. PaginationLast --- */
+export interface PaginationLastProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof paginationButtonVariants> {
+  class?: string;
+  hideText?: boolean;
+}
+
+export const PaginationLast: Component<PaginationLastProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant", "size", "hideText"]);
+
+  return (
+    <PaginationLink
+      aria-label="Go to last page"
+      variant={local.variant}
+      size={local.size}
+      class={cn("gap-1 p-0 min-w-8", local.class)}
+      {...rest}
+    >
+      <ChevronsRight class="size-4" />
+      <Show when={!local.hideText}>
+        <span class="sr-only">Last page</span>
+      </Show>
+    </PaginationLink>
+  );
+};
+
+/* --- 10. PaginationEllipsis --- */
+export interface PaginationEllipsisProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+}
+
+export const PaginationEllipsis: Component<PaginationEllipsisProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <span
+      aria-hidden="true"
+      class={cn("flex h-9 w-9 items-center justify-center text-muted-foreground", local.class)}
+      {...rest}
+    >
+      <MoreHorizontal class="size-4" />
+      <span class="sr-only">More pages</span>
+    </span>
+  );
+};
+
+/* --- 11. PaginationSummary --- */
+export interface PaginationSummaryProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const PaginationSummary: ParentComponent<PaginationSummaryProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("text-xs text-muted-foreground font-mono select-none", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};