zudoku 0.0.0-efc60ba6 → 0.0.0-efe3cd16

package/src/lib/shiki.ts

@@ -69,6 +69,8 @@ export const defaultLanguages: BundledLanguage[] = [
   "jsx",
   "typescript",
   "tsx",
+  "graphql",
+  "jsonc",
   "json",
   "python",
   "java",
@@ -83,6 +85,8 @@ export const defaultLanguages: BundledLanguage[] = [
   "html",
   "xml",
   "yaml",
+  "toml",
+  "rust",
   "markdown",
   "mdx",
 ];
@@ -106,14 +110,14 @@ const rehypeCodeBlockPlugin = () => (tree: Root) => {
   });
 };
 
-export const createConfiguredShikiRehypePlugins = (themes?: ThemesRecord) => [
+export const createConfiguredShikiRehypePlugins = (
+  themes: ThemesRecord = defaultHighlightOptions.themes,
+  highlighterInstance: HighlighterCore = highlighter,
+) => [
   [
     rehypeShikiFromHighlighter,
-    highlighter,
-    {
-      ...defaultHighlightOptions,
-      themes: themes ?? defaultHighlightOptions.themes,
-    },
+    highlighterInstance,
+    { ...defaultHighlightOptions, themes },
   ] satisfies Pluggable,
   rehypeCodeBlockPlugin,
 ];

package/src/lib/ui/Breadcrumb.tsx

@@ -67,6 +67,7 @@ const BreadcrumbPage = React.forwardRef<
     aria-disabled="true"
     aria-current="page"
     className={cn("font-normal text-foreground", className)}
+    tabIndex={props.tabIndex}
     {...props}
   />
 ));

package/src/lib/ui/Carousel.tsx

@@ -132,6 +132,7 @@ const Carousel = React.forwardRef<
           canScrollNext,
         }}
       >
+        {/** biome-ignore lint/a11y/useSemanticElements: shadcn uses divs for the carousel */}
         <div
           ref={ref}
           onKeyDownCapture={handleKeyDown}

package/src/lib/ui/CodeBlock.tsx

@@ -1,6 +1,6 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
-import type { ReactNode } from "react";
-import { useRef } from "react";
+import { type ReactNode, useRef } from "react";
+import { LanguageIcon } from "../components/LanguageIcon.js";
 import { cn } from "../util/cn.js";
 import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
 
@@ -18,35 +18,6 @@ export type CodeBlockProps = {
   showLineNumbers?: boolean;
 };
 
-const IconToLanguageMap: Record<string, RegExp> = {
-  typescript: /(tsx?|typescript)/,
-  javascript: /(jsx?|javascript)/,
-  markdown: /(md|markdown)/,
-  mdx: /(mdx)/,
-  json: /(json)/,
-  yaml: /(yaml)/,
-  toml: /(toml)/,
-  bash: /(shell|bash|sh|zsh)/,
-  python: /(py|python)/,
-  dotnet: /(cs|csharp|vb)/,
-  rust: /(rs|rust)/,
-  ruby: /(rb|ruby)/,
-  php: /php/,
-  html: /html?/,
-  css: /css/,
-};
-
-const getIconUrl = (language?: string) => {
-  if (!language) return undefined;
-
-  const icon = Object.entries(IconToLanguageMap).find(([_, regex]) =>
-    regex.test(language),
-  );
-  return icon
-    ? `https://cdn.simpleicons.org/${icon[0]}/000/fff?viewbox=auto`
-    : undefined;
-};
-
 export const CodeBlock = ({
   children,
   title = "Code",
@@ -61,18 +32,16 @@ export const CodeBlock = ({
 
   if (!children) return null;
 
-  const iconUrl = showLanguageIndicator ? getIconUrl(language) : undefined;
-
   return (
     <div
       className={cn(
-        "border code-block-wrapper relative group bg-muted/50 rounded-md overflow-hidden",
+        "border code-block-wrapper relative group rounded-md overflow-hidden",
         showLineNumbers && "line-numbers",
       )}
     >
       <div className="border-b flex items-center h-10 font-sans bg-black/2">
-        <div className="flex items-center gap-2 flex-1 text-sm w-full px-3">
-          {iconUrl && <img src={iconUrl} className="h-3 max-w-4" />}
+        <div className="flex items-center gap-1.5 flex-1 text-sm w-full px-3">
+          <LanguageIcon language={language} />
           {title}
         </div>{" "}
         {showCopy !== "never" && (
@@ -101,7 +70,7 @@ export const CodeBlock = ({
       </div>
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>code]:p-3 [&>code]:py-2",
+          "code-block text-sm not-prose scrollbar [&_code]:px-3 [&_code]:py-2",
           props.className,
         )}
         ref={ref}

package/src/lib/ui/Command.tsx

@@ -1,8 +1,8 @@
-import { type DialogProps } from "@radix-ui/react-dialog";
+import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
+import type { ComponentPropsWithoutRef } from "react";
 import * as React from "react";
-import { type ComponentPropsWithoutRef } from "react";
 import { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
 import { cn } from "../util/cn.js";
 
@@ -58,7 +58,6 @@ const CommandInput = 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 border-b px-3" cmdk-input-wrapper="">
     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
@@ -78,7 +77,6 @@ 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}

package/src/lib/ui/Dialog.tsx

@@ -1,7 +1,6 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { CircleIcon, XIcon } from "lucide-react";
 import * as React from "react";
-
-import { XIcon } from "lucide-react";
 import { cn } from "../util/cn.js";
 
 const Dialog = DialogPrimitive.Root;
@@ -45,8 +44,17 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="absolute left-1 top-1 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <XIcon className="h-3 w-3" strokeWidth={2} />
+        <DialogPrimitive.Close className="absolute p-3 group -left-1.5 -top-1.5 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <CircleIcon
+            className="h-2 w-2 transition-all border border-transparent  group-hover:border-white/20 rounded-full group-hover:scale-180 group-hover:text-red-400"
+            strokeWidth={2}
+            fill="currentColor"
+          />
+          <XIcon
+            className="h-2 w-2 absolute top-3 left-3 text-transparent group-hover:text-red-800 transition-colors"
+            strokeWidth={2}
+            fill="currentColor"
+          />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       )}

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -40,7 +40,7 @@ export const EmbeddedCodeBlock = ({
     >
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>pre]:p-4",
+          "code-block text-sm not-prose scrollbar overflow-x-auto [&>pre]:p-2",
           props.className,
         )}
         ref={ref}

package/src/lib/ui/Form.tsx

@@ -1,11 +1,11 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import {
   Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
   FormProvider,
   useFormContext,
 } from "react-hook-form";

package/src/lib/ui/Pagination.tsx

@@ -2,11 +2,10 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../util/cn.js";
-import { ButtonProps, buttonVariants } from "./Button.js";
+import { type ButtonProps, buttonVariants } from "./Button.js";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
-    role="navigation"
     aria-label="pagination"
     className={cn("mx-auto flex w-full justify-center", className)}
     {...props}

package/src/lib/ui/ReactComponentDoc.tsx

@@ -0,0 +1,68 @@
+import { Badge } from "./Badge.js";
+import { Card } from "./Card.js";
+
+type PropType =
+  | string
+  | {
+      name: string;
+      description: string;
+      required: boolean;
+    };
+
+type ReactComponentDocProps = {
+  component: {
+    __docgenInfo: {
+      displayName: string;
+      description: string;
+      props: Record<
+        string,
+        {
+          type: PropType;
+          description: string;
+          required: boolean;
+        }
+      >;
+    };
+  };
+};
+
+export const ReactComponentDoc = ({ component }: ReactComponentDocProps) => {
+  const docgen = component.__docgenInfo;
+
+  if (!docgen) return null;
+
+  return (
+    <Card className="not-prose">
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2  border-b p-6">
+          <h2 className="text-lg font-medium">Component Properties</h2>
+          <p className="text-sm text-muted-foreground">
+            The properties of the component.
+          </p>
+        </div>
+        <div className="grid grid-cols-[1fr_auto_auto] gap-2 divide-y">
+          {Object.entries(docgen.props).map(([key, value]) => (
+            <div
+              key={key}
+              className="px-6 pb-2 col-span-full grid grid-cols-subgrid"
+            >
+              <span className="font-medium text-primary">{key}</span>
+              <div>
+                {value.required && (
+                  <Badge className="ml-2 font-mono">required</Badge>
+                )}
+              </div>
+              <div>
+                {typeof value.type === "object" && value.type.name && (
+                  <Badge className="ml-2 font-mono" variant="muted">
+                    {value.type.name}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Card>
+  );
+};

package/src/lib/ui/Secret.tsx

@@ -0,0 +1,106 @@
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../util/cn.js";
+import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
+import { Button } from "./Button.js";
+
+type Status = "active" | "expired" | "expiring" | "revoked" | "none";
+
+export const Secret = ({
+  secret,
+  preview = 5,
+  className,
+  status,
+  onCopy,
+  revealed: controlledRevealed,
+  onReveal,
+  noReveal: disabledReveal,
+}: {
+  revealed?: boolean;
+  noReveal?: boolean;
+  secret: string;
+  status?: Status;
+  className?: string;
+  preview?: number;
+  onCopy?: (secret: string) => void;
+  onReveal?: (revealed: boolean) => void;
+}) => {
+  const previewChars = Math.abs(preview);
+  const [isRevealed, setRevealed] = useState(false);
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
+
+  const revealed = controlledRevealed ?? isRevealed;
+
+  return (
+    <div
+      className={cn(
+        "flex gap-2 items-center text-sm border rounded-md px-1",
+        className,
+      )}
+    >
+      <div className="font-mono w-full h-9 items-center flex px-2 text-xs gap-2">
+        {status && (
+          <div
+            className={cn(
+              "rounded-full shrink-0 w-2 h-2 mr-2",
+              status === "active" && "bg-emerald-400",
+              status === "expired" && "bg-neutral-200",
+              status === "expiring" && "bg-yellow-400",
+              status === "revoked" && "bg-red-400",
+              status === "none" && "opacity-0",
+            )}
+          />
+        )}
+        <span className="w-full truncate">
+          <div
+            className={cn(
+              "w-40 inline-block md:w-fit",
+              revealed ? "" : "opacity-50",
+            )}
+          >
+            {revealed
+              ? secret.slice(
+                  0,
+                  previewChars === 0 ? secret.length : -previewChars,
+                )
+              : "•••• ".repeat(
+                  secret.slice(
+                    0,
+                    previewChars === 0 ? secret.length : -previewChars,
+                  ).length / 5,
+                ) +
+                "•".repeat(
+                  secret.slice(
+                    0,
+                    previewChars === 0 ? secret.length : -previewChars,
+                  ).length % 5,
+                )}
+          </div>
+          {previewChars > 0 && <span>{secret.slice(-previewChars)}</span>}
+        </span>
+      </div>
+      {disabledReveal !== true && (
+        <Button
+          variant="ghost"
+          onClick={() => {
+            setRevealed((prev) => !prev);
+            onReveal?.(!revealed);
+          }}
+          size="icon"
+        >
+          {revealed ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
+        </Button>
+      )}
+      <Button
+        variant="ghost"
+        onClick={() => {
+          copyToClipboard(secret);
+          onCopy?.(secret);
+        }}
+        size="icon"
+      >
+        {isCopied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+      </Button>
+    </div>
+  );
+};

package/src/lib/ui/ToggleGroup.tsx

@@ -1,5 +1,5 @@
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "../util/cn.js";

package/src/lib/ui/Value.tsx

@@ -0,0 +1,42 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { cn } from "../util/cn.js";
+import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
+import { Button } from "./Button.js";
+
+export const Value = ({
+  value,
+  className,
+  onCopy,
+}: {
+  value: string;
+  className?: string;
+  onCopy?: (value: string) => void;
+}) => {
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <div
+      className={cn(
+        "flex gap-2 items-center text-sm border rounded-md px-1",
+        className,
+      )}
+    >
+      <div className="font-mono w-full h-9 items-center flex px-2 text-xs gap-2">
+        <span className="w-full truncate">
+          <div className={"w-40 inline-block md:w-fit"}>{value}</div>
+        </span>
+      </div>
+
+      <Button
+        variant="ghost"
+        onClick={() => {
+          copyToClipboard(value);
+          onCopy?.(value);
+        }}
+        size="icon"
+      >
+        {isCopied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+      </Button>
+    </div>
+  );
+};

package/src/lib/util/MdxComponents.tsx

@@ -1,4 +1,4 @@
-import { type MDXComponents } from "mdx/types.js";
+import type { MDXComponents } from "mdx/types.js";
 import { CodeBlock } from "zudoku/ui/CodeBlock.js";
 import { AnchorLink } from "../components/AnchorLink.js";
 import { Framed } from "../components/Framed.js";
@@ -16,6 +16,7 @@ export const MdxComponents = {
   img: ({ node, ...props }) => {
     if (/\.(mp4|webm|mov|avi)$/.test(props.src ?? "")) {
       return (
+        // biome-ignore lint/a11y/useMediaCaption: No in control of the caption here
         <video
           src={props.src}
           controls
@@ -26,7 +27,13 @@ export const MdxComponents = {
         />
       );
     }
-    return <img {...props} className={cn("rounded-lg", props.className)} />;
+    return (
+      <img
+        alt={props.alt}
+        {...props}
+        className={cn("rounded-lg", props.className)}
+      />
+    );
   },
   Framed,
   h1: ({ children, id }) => (
@@ -102,7 +109,10 @@ export const MdxComponents = {
         showLineNumbers={showLineNumbers}
         title={title}
       >
-        <code className={cn(className, "not-inline")} {...props}>
+        <code
+          className={cn(className, "overflow-x-auto scrollbar not-inline")}
+          {...props}
+        >
           {children}
         </code>
       </CodeBlock>

package/src/lib/util/cn.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

package/src/lib/util/createVariantComponent.tsx

@@ -1,8 +1,8 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
+import type { cva } from "class-variance-authority";
 import type { ClassValue } from "clsx";
+import type { HTMLElementType, JSX } from "react";
 import * as React from "react";
-import { type HTMLElementType, type JSX } from "react";
 import { cn } from "./cn.js";
 
 const createVariantComponent = <

package/src/lib/util/groupBy.ts

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: Allow any type
 export const groupBy = <
   T extends Record<PropertyKey, any>,
   KeySelector extends (item: T) => PropertyKey,

package/src/lib/util/humanFileSize.ts

@@ -9,8 +9,7 @@ export const humanFileSize = (bytes = 0) => {
   }
 
   const exponent = Math.floor(Math.log(bytes) / Math.log(1000.0));
-  const decimal = (bytes / Math.pow(1000.0, exponent)).toFixed(
-    exponent ? 2 : 0,
-  );
+  const decimal = (bytes / 1000.0 ** exponent).toFixed(exponent ? 2 : 0);
+
   return `${decimal} ${exponent ? `${"kMGTPEZY"[exponent - 1]}B` : "B"}`;
 };

package/src/lib/util/invariant.ts

@@ -1,4 +1,5 @@
 export default function invariant(
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   condition: any,
   // Not providing an inline default argument for message as the result is smaller
   /**

package/src/lib/util/pastellize.ts

@@ -1,8 +1,8 @@
 const c2n = (c: string) =>
   Math.abs(
-    isNaN(parseInt(c))
+    Number.isNaN(parseInt(c))
       ? c.toLowerCase().charCodeAt(0) - 96
-      : isNaN(parseInt(c))
+      : Number.isNaN(parseInt(c))
         ? 0
         : parseInt(c),
   );

package/src/lib/util/types.ts

@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: Allow any type
 export type RecordAny = Record<string, any>;
 
 export type JsonPrimitive = string | number | boolean | null;

package/src/lib/util/useIsomorphicLayoutEffect.ts

@@ -1,4 +1,5 @@
 import { useEffect, useLayoutEffect } from "react";
+
 const useIsomorphicLayoutEffect =
   typeof window !== "undefined" ? useLayoutEffect : useEffect;
 

package/src/lib/util/useScrollToAnchor.ts

@@ -13,7 +13,9 @@ export const useScrollToHash = () => {
 
       // Operation list items might have subdivisions that the navigation doesn't show.
       // The subdivisions are separated by a slash so we need to remove everything before the slash to get the navigation correct item.
-      const linkHash = cleanHash.split("/").at(0)!;
+      const linkHash = cleanHash.split("/").at(0);
+      if (!linkHash) return false;
+
       const element = document.getElementById(decodeURIComponent(cleanHash));
 
       const link = document.querySelector(

package/src/shiki/langs/vue-vine.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/vue-vine";

package/dist/lib/components/ReactMarkdown.d.ts

@@ -1,29 +0,0 @@
-import type { Element, Parents } from "hast";
-import { Components as JsxRuntimeComponents } from "hast-util-to-jsx-runtime";
-import { ReactElement } from "react";
-import { Options as RemarkRehypeOptions } from "remark-rehype";
-import { PluggableList } from "unified";
-interface AllowElement {
-    (element: Readonly<Element>, index: number, parent: Readonly<Parents> | undefined): boolean | null | undefined;
-}
-interface UrlTransform {
-    (url: string, key: string, node: Readonly<Element>): string | null | undefined;
-}
-interface Components extends Partial<JsxRuntimeComponents> {
-}
-interface Options {
-    allowElement?: AllowElement | null;
-    allowedElements?: ReadonlyArray<string> | null;
-    children?: string | null;
-    className?: string | null;
-    components?: Components | null;
-    disallowedElements?: ReadonlyArray<string> | null;
-    rehypePlugins?: PluggableList | null;
-    remarkPlugins?: PluggableList | null;
-    remarkRehypeOptions?: Readonly<RemarkRehypeOptions> | null;
-    skipHtml?: boolean | null;
-    unwrapDisallowed?: boolean | null;
-    urlTransform?: UrlTransform | null;
-}
-export declare function ReactMarkdown(options: Readonly<Options>): ReactElement;
-export {};