zudoku 0.33.1 → 0.34.0

package/src/lib/ui/Checkbox.tsx

@@ -1,36 +1,20 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { cva, type VariantProps } from "class-variance-authority";
 import { Check } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../util/cn.js";
 
-const checkboxVariants = cva(
-  "peer h-4 w-4 shrink-0 rounded-sm 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",
-  {
-    variants: {
-      variant: {
-        default: "border border-primary data-[state=checked]:bg-primary",
-        outline: "border border-input data-[state=checked]:bg-accent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-interface CheckboxProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-    VariantProps<typeof checkboxVariants> {}
-
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxProps
->(({ className, variant, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
-    className={cn(checkboxVariants({ variant, className }))}
+    className={cn(
+      "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}
   >
     <CheckboxPrimitive.Indicator
@@ -42,4 +26,4 @@ const Checkbox = React.forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox };

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>

package/src/lib/ui/Select.tsx

@@ -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}

package/src/lib/ui/SyntaxHighlight.tsx

@@ -30,7 +30,7 @@ void import("prismjs/components/prism-javascript.min.js");
 void import("prismjs/components/prism-typescript.min.js");
 
 import { useTheme } from "next-themes";
-import { useState } from "react";
+import { memo, useState } from "react";
 import { ClientOnly } from "../components/ClientOnly.js";
 import { cn } from "../util/cn.js";
 
@@ -45,18 +45,20 @@ export type SyntaxHighlightProps = {
   code?: string;
   showCopy?: "hover" | "always" | "never";
   showCopyText?: boolean;
+  disabled?: boolean;
 } & Omit<HighlightProps, "children" | "language">;
 
 const remapLang = {
   mdx: "md",
 } as Record<string, string>;
 
-export const SyntaxHighlight = ({
+const SyntaxHighlightInner = ({
   language = "plain",
   showCopy = "hover",
   showCopyText,
   title,
   children,
+  disabled,
   ...props
 }: SyntaxHighlightProps) => {
   const { resolvedTheme } = useTheme();
@@ -75,34 +77,84 @@ export const SyntaxHighlight = ({
   const themeColorClasses =
     "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
 
-  return (
-    <ClientOnly
-      fallback={
-        <div className="relative group">
-          {title && (
-            <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
-              {title}
-            </div>
+  const Wrapper = ({
+    children,
+    className,
+    style,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+  }) => (
+    <div className="relative group">
+      {title && (
+        <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+          {title}
+        </div>
+      )}
+      <pre
+        className={cn(
+          "relative scrollbar overflow-x-auto",
+          props.className,
+          props.noBackground ? "!bg-transparent" : themeColorClasses,
+          props.wrapLines && "whitespace-pre-wrap break-words",
+          title && "pt-10",
+          className,
+        )}
+        style={style}
+      >
+        {children}
+      </pre>
+      {props.showLanguageIndicator && (
+        <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
+          {language}
+        </span>
+      )}
+      {showCopy !== "never" && (
+        <button
+          type="button"
+          aria-label="Copy code"
+          title="Copy code"
+          className={cn(
+            "absolute top-2 right-2 p-2  hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
+            showCopy === "hover"
+              ? "opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700"
+              : "bg-zinc-100 dark:bg-zinc-700",
+            showCopyText && "flex gap-2 items-center font-medium",
           )}
-          <pre
-            className={cn(
-              "relative scrollbar overflow-x-auto",
-              props.className,
-              props.noBackground ? "!bg-transparent" : themeColorClasses,
-              props.wrapLines && "whitespace-pre-wrap break-words",
-              title && "pt-10",
-            )}
-          >
-            {code}
-          </pre>
-          {props.showLanguageIndicator && (
-            <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-              {language}
-            </span>
+          disabled={isCopied}
+          onClick={() => {
+            setIsCopied(true);
+            void navigator.clipboard.writeText(code);
+            setTimeout(() => setIsCopied(false), 2000);
+          }}
+        >
+          {isCopied ? (
+            <CheckIcon
+              className="text-emerald-600"
+              size={16}
+              strokeWidth={2.5}
+              absoluteStrokeWidth
+            />
+          ) : (
+            <CopyIcon size={16} />
           )}
-        </div>
-      }
-    >
+          {showCopyText && "Copy"}
+        </button>
+      )}
+    </div>
+  );
+
+  if (disabled) {
+    return (
+      <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
+        <Wrapper>{code}</Wrapper>
+      </ClientOnly>
+    );
+  }
+
+  return (
+    <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
       <Highlight
         theme={highlightTheme}
         language={remapLang[language] ?? language}
@@ -110,77 +162,23 @@ export const SyntaxHighlight = ({
         code={code}
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <div className="relative group">
-            {title && (
-              <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
-                {title}
+          <Wrapper className={className} style={style}>
+            {tokens.map((line, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
               </div>
-            )}
-            <pre
-              className={cn(
-                "relative scrollbar overflow-x-auto",
-                className,
-                props.className,
-                props.noBackground && "!bg-transparent",
-                props.wrapLines && "whitespace-pre-wrap break-words",
-                title && "pt-10",
-              )}
-              style={style}
-            >
-              {tokens.map((line, i) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <div key={i} {...getLineProps({ line })}>
-                  {line.map((token, key) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <span key={key} {...getTokenProps({ token })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
-            {props.showLanguageIndicator && (
-              <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-                {language}
-              </span>
-            )}
-            {showCopy !== "never" && (
-              <button
-                type="button"
-                aria-label="Copy code"
-                title="Copy code"
-                className={cn(
-                  "absolute top-2 right-2 p-2  hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
-                  showCopy === "hover"
-                    ? "opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700"
-                    : "bg-zinc-100 dark:bg-zinc-700",
-                  showCopyText && "flex gap-2 items-center font-medium",
-                )}
-                disabled={isCopied}
-                onClick={() => {
-                  setIsCopied(true);
-                  void navigator.clipboard.writeText(
-                    tokens
-                      .map((l) => l.map(({ content }) => content).join(""))
-                      .join("\n"),
-                  );
-                  setTimeout(() => setIsCopied(false), 2000);
-                }}
-              >
-                {isCopied ? (
-                  <CheckIcon
-                    className="text-emerald-600"
-                    size={16}
-                    strokeWidth={2.5}
-                    absoluteStrokeWidth
-                  />
-                ) : (
-                  <CopyIcon size={16} />
-                )}
-                {showCopyText && "Copy"}
-              </button>
-            )}
-          </div>
+            ))}
+          </Wrapper>
         )}
       </Highlight>
     </ClientOnly>
   );
 };
+
+export const SyntaxHighlight = memo(SyntaxHighlightInner);
+
+SyntaxHighlight.displayName = "SyntaxHighlight";

package/src/lib/util/MdxComponents.tsx

@@ -1,5 +1,5 @@
 import { type MDXComponents } from "mdx/types.js";
-import { Link } from "react-router";
+import { AnchorLink } from "../components/AnchorLink.js";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.js";
 import { Callout } from "../ui/Callout.js";
@@ -47,7 +47,7 @@ export const MdxComponents = {
   ),
   a: ({ href, node, ...props }) =>
     href && !href.startsWith("http") ? (
-      <Link to={href} relative="path" {...props} />
+      <AnchorLink to={href} relative="path" {...props} />
     ) : (
       <a href={href} target="_blank" {...props} rel="noreferrer" />
     ),

package/src/lib/util/useScrollToAnchor.ts

@@ -9,21 +9,21 @@ export const useScrollToHash = () => {
 
   const scrollToHash = useCallback(
     (hash: string) => {
-      const cleanHash = hash
-        .replace(/^#/, "")
-        // Operation list items might have subdivisions that the sidebar doesn't show.
-        // The subdivisions are separated by a slash so we need to remove everything before the slash to get the sidebar correct item.
-        .split("/")
-        .at(0)!;
+      const cleanHash = hash.replace(/^#/, "");
+
+      // Operation list items might have subdivisions that the sidebar doesn't show.
+      // The subdivisions are separated by a slash so we need to remove everything before the slash to get the sidebar correct item.
+      const linkHash = cleanHash.split("/").at(0)!;
       const element = document.getElementById(decodeURIComponent(cleanHash));
+
       const link = document.querySelector(
-        `[${DATA_ANCHOR_ATTR}="${cleanHash}"]`,
+        `[${DATA_ANCHOR_ATTR}="${linkHash}"]`,
       );
 
       if (element) {
         element.scrollIntoView();
         scrollIntoViewIfNeeded(link);
-        requestIdleCallback(() => setActiveAnchor(cleanHash));
+        requestIdleCallback(() => setActiveAnchor(linkHash));
         return true;
       }