zudoku 0.0.0-f49e3ea → 0.0.0-f52e8af

package/src/lib/plugins/search-pagefind/get-results.tsx

@@ -0,0 +1,75 @@
+import type { AuthState } from "../../authentication/state.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
+import type { PagefindOptions } from "./index.js";
+import type { PagefindSearchFragment, PagefindSearchResults } from "./types.js";
+
+export const getResults = async ({
+  search,
+  options,
+  auth,
+  context,
+}: {
+  search: PagefindSearchResults;
+  options: PagefindOptions;
+  auth: AuthState;
+  context: ZudokuContext;
+}) => {
+  const maxResults = options.maxResults ?? 10;
+  const transformFn = options.transformResults ?? (() => true);
+
+  const transformedResults: PagefindSearchFragment[] = [];
+
+  const generator = searchResultGenerator({
+    search,
+    transformFn,
+    auth,
+    context,
+  });
+
+  for await (const result of generator) {
+    transformedResults.push(result);
+    if (transformedResults.length >= maxResults) break;
+  }
+
+  return transformedResults;
+};
+
+async function* searchResultGenerator({
+  search,
+  transformFn,
+  auth,
+  context,
+}: {
+  search: PagefindSearchResults;
+  transformFn: NonNullable<PagefindOptions["transformResults"]>;
+  auth: AuthState<unknown>;
+  context: ZudokuContext;
+}) {
+  const batchSize = 5;
+  let processedCount = 0;
+
+  while (processedCount < search.results.length) {
+    const batch = search.results.slice(
+      processedCount,
+      processedCount + batchSize,
+    );
+    processedCount += batch.length;
+
+    const batchData = await Promise.all(batch.map((result) => result.data()));
+
+    for (const result of batchData) {
+      const transformed = transformFn({ result, auth, context });
+
+      if (transformed === false) {
+        // Skip this result
+        continue;
+      } else if (transformed === true || transformed == null) {
+        // Keep the original result
+        yield result;
+      } else {
+        // Return the transformed result
+        yield transformed;
+      }
+    }
+  }
+}

package/src/lib/plugins/search-pagefind/index.tsx

@@ -0,0 +1,21 @@
+import type { ZudokuConfig } from "../../../config/validators/validate.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import type { ZudokuPlugin } from "../../core/plugins.js";
+import { PagefindSearch } from "./PagefindSearch.js";
+
+export type PagefindOptions = Extract<
+  ZudokuConfig["search"],
+  { type: "pagefind" }
+>;
+
+export const pagefindSearchPlugin = (
+  options: PagefindOptions,
+): ZudokuPlugin => {
+  return {
+    renderSearch: ({ isOpen, onClose }) => (
+      <ClientOnly>
+        <PagefindSearch isOpen={isOpen} onClose={onClose} options={options} />
+      </ClientOnly>
+    ),
+  };
+};

package/src/lib/plugins/search-pagefind/types.ts

@@ -0,0 +1,118 @@
+interface PagefindIndexOptions {
+  basePath?: string;
+  baseUrl?: string;
+  excerptLength?: number;
+  indexWeight?: number;
+  mergeFilter?: Record<string, unknown>;
+  highlightParam?: string;
+  language?: string;
+  primary?: boolean;
+  ranking?: PagefindRankingWeights;
+}
+
+interface PagefindRankingWeights {
+  termSimilarity?: number;
+  pageLength?: number;
+  termSaturation?: number;
+  termFrequency?: number;
+}
+
+interface PagefindSearchOptions {
+  preload?: boolean;
+  verbose?: boolean;
+  filters?: Record<string, unknown>;
+  sort?: Record<string, unknown>;
+}
+
+type PagefindFilterCounts = Record<string, Record<string, number>> & {};
+
+interface PagefindSearchResults {
+  results: PagefindSearchResult[];
+  unfilteredResultCount: number;
+  filters: PagefindFilterCounts;
+  totalFilters: PagefindFilterCounts;
+  timings: {
+    preload: number;
+    search: number;
+    total: number;
+  };
+}
+
+interface PagefindSearchResult {
+  id: string;
+  score: number;
+  words: number[];
+  data: () => Promise<PagefindSearchFragment>;
+}
+
+interface PagefindSearchFragment {
+  url: string;
+  raw_url?: string;
+  content: string;
+  raw_content?: string;
+  excerpt: string;
+  sub_results: PagefindSubResult[];
+  word_count: number;
+  locations: number[];
+  weighted_locations: PagefindWordLocation[];
+  filters: Record<string, string[]>;
+  meta: Record<string, string>;
+  anchors: PagefindSearchAnchor[];
+}
+
+interface PagefindSubResult {
+  title: string;
+  url: string;
+  locations: number[];
+  weighted_locations: PagefindWordLocation[];
+  excerpt: string;
+  anchor?: PagefindSearchAnchor;
+}
+
+interface PagefindWordLocation {
+  weight: number;
+  balanced_score: number;
+  location: number;
+}
+
+interface PagefindSearchAnchor {
+  element: string;
+  id: string;
+  text?: string;
+  location: number;
+}
+
+interface Pagefind {
+  debouncedSearch: (
+    query: string,
+    options?: PagefindSearchOptions,
+    duration?: number,
+  ) => Promise<PagefindSearchResults>;
+  destroy: () => Promise<void>;
+  filters: () => Promise<PagefindFilterCounts>;
+  init: () => Promise<void>;
+  mergeIndex: (
+    indexPath: string,
+    options?: Record<string, unknown>,
+  ) => Promise<void>;
+  options: (options: PagefindIndexOptions) => Promise<void>;
+  preload: (term: string, options?: PagefindIndexOptions) => Promise<void>;
+  search: (
+    term: string,
+    options?: PagefindSearchOptions,
+  ) => Promise<PagefindSearchResults>;
+}
+
+export type {
+  Pagefind,
+  PagefindFilterCounts,
+  PagefindIndexOptions,
+  PagefindRankingWeights,
+  PagefindSearchAnchor,
+  PagefindSearchFragment,
+  PagefindSearchOptions,
+  PagefindSearchResult,
+  PagefindSearchResults,
+  PagefindSubResult,
+  PagefindWordLocation,
+};

package/src/lib/shiki.ts

@@ -0,0 +1,133 @@
+import rehypeShikiFromHighlighter, {
+  type RehypeShikiCoreOptions,
+} from "@shikijs/rehype/core";
+import {
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+} from "@shikijs/transformers";
+import type { Root } from "hast";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { Fragment, type JSX } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import type { Pluggable } from "unified";
+import { visit } from "unist-util-visit";
+import { cn } from "./util/cn.js";
+
+const engine = createJavaScriptRegexEngine({ forgiving: true });
+export const highlighter = await createHighlighterCore({
+  engine,
+  langAlias: {
+    markup: "html",
+    svg: "xml",
+    mathml: "xml",
+    atom: "xml",
+    ssml: "xml",
+    rss: "xml",
+    webmanifest: "json",
+  },
+});
+
+export const defaultHighlightOptions = {
+  themes: {
+    light: "github-light",
+    dark: "github-dark",
+  } satisfies { light: BundledTheme; dark: BundledTheme },
+  defaultColor: false,
+  inline: "tailing-curly-colon",
+  addLanguageClass: true,
+  transformers: [transformerMetaHighlight(), transformerMetaWordHighlight()],
+  parseMetaString: (str) => {
+    // Matches key="value", key=value, or key attributes
+    const matches = str.matchAll(
+      /([a-z0-9]+)(?:=(["'])(.*?)\2|=(.*?)(?:\s|$)|(?:\s|$))/gi,
+    );
+    return Object.fromEntries(
+      Array.from(matches).map((match) => {
+        const key = match[1];
+        const value = match[3] || match[4] || true;
+        return [key, value];
+      }),
+    );
+  },
+} satisfies RehypeShikiCoreOptions;
+
+export const defaultLanguages: BundledLanguage[] = [
+  "shellscript",
+  "javascript",
+  "jsx",
+  "typescript",
+  "tsx",
+  "json",
+  "python",
+  "java",
+  "go",
+  "csharp",
+  "kotlin",
+  "objective-c",
+  "php",
+  "ruby",
+  "swift",
+  "css",
+  "html",
+  "xml",
+  "yaml",
+  "markdown",
+  "mdx",
+];
+
+const rehypeCodeBlockPlugin = () => (tree: Root) => {
+  visit(tree, "element", (node, _index, parent) => {
+    if (node.tagName !== "code") return;
+
+    const isCodeBlock = parent?.type === "element" && parent.tagName === "pre";
+    node.properties.inline = JSON.stringify(!isCodeBlock);
+
+    // Pass through properties from <pre> to <code> so we can handle it in `code` only
+    if (isCodeBlock) {
+      node.properties = {
+        ...node.properties,
+        ...structuredClone(parent.properties),
+        class: cn(node.properties.class, parent.properties.class),
+      };
+      parent.properties = {};
+    }
+  });
+};
+
+export const createConfiguredShikiRehypePlugins = (themes?: {
+  light: BundledTheme;
+  dark: BundledTheme;
+}) => {
+  return [
+    [
+      rehypeShikiFromHighlighter,
+      highlighter,
+      {
+        ...defaultHighlightOptions,
+        themes: themes ?? defaultHighlightOptions.themes,
+      } satisfies RehypeShikiCoreOptions,
+    ] satisfies Pluggable,
+    rehypeCodeBlockPlugin,
+  ];
+};
+
+export const highlight = (
+  highlighter: HighlighterCore,
+  code: string,
+  lang = "text",
+  themes: {
+    light: BundledTheme;
+    dark: BundledTheme;
+  } = defaultHighlightOptions.themes,
+) => {
+  const value = highlighter.codeToHast(code, {
+    lang,
+    ...defaultHighlightOptions,
+    themes,
+  });
+
+  return toJsxRuntime(value, { Fragment, jsx, jsxs }) as JSX.Element;
+};

package/src/lib/ui/Badge.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "../util/cn.js";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
@@ -12,6 +12,7 @@ const badgeVariants = cva(
           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        muted: "bg-muted text-muted-foreground ",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",

package/src/lib/ui/Button.tsx

@@ -1,10 +1,10 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva, VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../util/cn.js";
 
 export const buttonVariants = cva(
-  "not-prose inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "not-prose inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -18,6 +18,8 @@ export const buttonVariants = cva(
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        expand:
+          "flex gap-1.5 border bg-transparent rounded-xl text-muted-foreground hover:text-foreground",
       },
       size: {
         default: "h-9 px-4 py-2",

package/src/lib/ui/Callout.tsx

@@ -56,31 +56,50 @@ type CalloutProps = {
   title?: string;
   children: ReactNode;
   className?: string;
+  icon?: boolean;
 };
 
-export const Callout = ({ type, children, title, className }: CalloutProps) => {
+export const Callout = ({
+  type,
+  children,
+  title,
+  className,
+  icon = true,
+}: CalloutProps) => {
   const { border, bg, iconColor, titleColor, textColor, Icon } =
     stylesMap[type];
 
   return (
     <div
       className={cn(
-        "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "not-prose rounded-md border p-4 text-md my-2",
+        icon &&
+          "grid grid-cols-[min-content_1fr] items-baseline grid-rows-[fit-content_1fr] gap-x-4 gap-y-2",
+        !icon && title && "flex flex-col gap-2",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none my-2",
-        title && "items-center",
+        "[&_.code-block-wrapper]:border",
+        "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:ps-4 [&_ul>li]:ps-1 [&_ul>li]:my-1",
+        icon && title && "items-center",
         border,
         bg,
         className,
       )}
     >
-      <Icon
-        className={cn(!title && "translate-y-px", iconColor)}
-        size={20}
-        aria-hidden="true"
-      />
+      {icon && (
+        <Icon
+          className={cn(!title ? "translate-y-1" : "align-middle", iconColor)}
+          size={20}
+          aria-hidden="true"
+        />
+      )}
       {title && <h3 className={cn("font-medium", titleColor)}>{title}</h3>}
-      <div className={cn("col-start-2", !title && "row-start-1", textColor)}>
+      <div
+        className={cn(
+          icon && "col-start-2",
+          !title && icon && "row-start-1",
+          textColor,
+        )}
+      >
         {children}
       </div>
     </div>

package/src/lib/ui/Card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-card text-card-foreground shadow-sm",
       className,
     )}
     {...props}

package/src/lib/ui/Checkbox.tsx

@@ -11,7 +11,8 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-[min(6px,var(--radius)-4px)] ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary",
+      "border border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
       className,
     )}
     {...props}

package/src/lib/ui/CodeBlock.tsx

@@ -0,0 +1,102 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { cn } from "../util/cn.js";
+
+export type CodeBlockProps = {
+  className?: string;
+  noBackground?: boolean;
+  wrapLines?: boolean;
+  showLanguageIndicator?: boolean;
+  language?: string;
+  title?: string;
+  children?: ReactNode;
+  code?: ReactNode;
+  showCopy?: "hover" | "always" | "never";
+  showCopyText?: boolean;
+  disabled?: boolean;
+  showLineNumbers?: boolean;
+};
+
+export const CodeBlock = ({
+  children,
+  title,
+  language,
+  showCopy = "hover",
+  showCopyText,
+  showLanguageIndicator = true,
+  showLineNumbers,
+  ...props
+}: CodeBlockProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  if (!children) return null;
+
+  return (
+    <div
+      className={cn(
+        "code-block-wrapper relative group bg-muted/50 rounded-md",
+        showLineNumbers && "line-numbers",
+      )}
+    >
+      {title && (
+        <div className="text-xs text-muted-foreground top-2 font-mono border-b w-full py-2 px-4 ">
+          {title}
+        </div>
+      )}
+      <div
+        className={cn(
+          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4",
+          props.className,
+        )}
+        ref={ref}
+      >
+        {children}
+      </div>
+      {showLanguageIndicator && (
+        <span
+          className={cn(
+            "absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0",
+            title && "top-12",
+          )}
+        >
+          {language}
+        </span>
+      )}
+      {showCopy !== "never" && (
+        <button
+          type="button"
+          aria-label="Copy code"
+          title="Copy code"
+          className={cn(
+            "absolute top-2 end-2 p-2 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
+            title && "top-10",
+            showCopy === "hover" && "opacity-0 group-hover:opacity-100",
+            showCopyText && "flex gap-2 items-center font-medium",
+          )}
+          disabled={isCopied}
+          onClick={() => {
+            if (!ref.current?.textContent) return;
+
+            setIsCopied(true);
+            void navigator.clipboard.writeText(ref.current.textContent);
+            setTimeout(() => setIsCopied(false), 2000);
+          }}
+        >
+          {isCopied ? (
+            <CheckIcon
+              className="text-emerald-600"
+              size={16}
+              strokeWidth={2.5}
+              absoluteStrokeWidth
+            />
+          ) : (
+            <CopyIcon size={16} />
+          )}
+          {showCopyText && "Copy"}
+        </button>
+      )}
+    </div>
+  );
+};

package/src/lib/ui/Command.tsx

@@ -2,6 +2,7 @@ import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import * as React from "react";
+import { ComponentPropsWithoutRef } from "react";
 import { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
 import { cn } from "../util/cn.js";
 
@@ -20,11 +21,32 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-const CommandDialog = ({ children, ...props }: DialogProps) => {
+const CommandDialog = ({
+  children,
+  command,
+  content,
+  ...props
+}: DialogProps & {
+  command?: ComponentPropsWithoutRef<typeof CommandPrimitive>;
+  content?: ComponentPropsWithoutRef<typeof DialogContent>;
+}) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <DialogContent
+        {...content}
+        className={cn(
+          "overflow-hidden p-0 shadow-lg top-[15vh] translate-y-[0%]",
+          content?.className,
+        )}
+        aria-describedby={undefined}
+      >
+        <Command
+          {...command}
+          className={cn(
+            "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+            command?.className,
+          )}
+        >
           {children}
         </Command>
       </DialogContent>
@@ -52,6 +74,25 @@ const CommandInput = React.forwardRef<
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
+const CommandInlineInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  // eslint-disable-next-line react/no-unknown-property
+  <div className="flex items-center" cmdk-input-wrapper="">
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInlineInput.displayName = CommandPrimitive.Input.displayName;
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
@@ -143,6 +184,7 @@ export {
   CommandDialog,
   CommandEmpty,
   CommandGroup,
+  CommandInlineInput,
   CommandInput,
   CommandItem,
   CommandList,

package/src/lib/ui/Input.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { cn } from "../util/cn.js";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

package/src/lib/ui/Select.tsx

@@ -83,9 +83,9 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
           position === "popper" &&
             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+          "divide-y",
         )}
       >
         {children}
@@ -115,7 +115,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}