zudoku 0.0.0-f2c28ed → 0.0.0-f36627bd

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/Select.tsx

@@ -16,14 +16,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
   >
     <span className="truncate">{children}</span>
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="flex-shrink-0 h-4 w-4 opacity-50" />
+      <ChevronDown className="shrink-0 h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -115,7 +115,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "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",
+      "relative flex w-full cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

package/src/lib/ui/Slider.tsx

@@ -18,7 +18,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;

package/src/lib/ui/Switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className,
     )}
     {...props}

package/src/lib/ui/SyntaxHighlight.tsx

@@ -3,12 +3,16 @@ import { useZudoku } from "../components/context/ZudokuContext.js";
 import { highlight } from "../shiki.js";
 import invariant from "../util/invariant.js";
 import { CodeBlock, type CodeBlockProps } from "./CodeBlock.js";
+import { EmbeddedCodeBlock } from "./EmbeddedCodeBlock.js";
 
 type SyntaxHighlightProps = CodeBlockProps &
-  ({ code: string; children?: never } | { code?: never; children: string });
+  (
+    | { code: string; embedded?: boolean; children?: never }
+    | { code?: never; children: string; embedded?: boolean }
+  );
 
 export const SyntaxHighlight = memo(
-  ({ code, children, ...props }: SyntaxHighlightProps) => {
+  ({ code, children, embedded, ...props }: SyntaxHighlightProps) => {
     const { syntaxHighlighting } = useZudoku().options;
 
     invariant(syntaxHighlighting?.highlighter, "Highlighter not found");
@@ -20,7 +24,11 @@ export const SyntaxHighlight = memo(
       syntaxHighlighting.themes,
     );
 
-    return <CodeBlock {...props}>{highlightedCode}</CodeBlock>;
+    return embedded ? (
+      <EmbeddedCodeBlock {...props}>{highlightedCode}</EmbeddedCodeBlock>
+    ) : (
+      <CodeBlock {...props}>{highlightedCode}</CodeBlock>
+    );
   },
 );
 

package/src/lib/ui/Tabs.tsx

@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className,
     )}
     {...props}
@@ -41,7 +41,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}

package/src/lib/ui/Textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}

package/src/lib/ui/Toggle.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "../util/cn.js";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
   {
     variants: {
       variant: {

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/Tooltip.tsx

@@ -9,6 +9,15 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
+const TooltipArrow = (
+  props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>,
+) => (
+  <TooltipPrimitive.Arrow
+    {...props}
+    className={cn(props.className, "fill-border")}
+  />
+);
+
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -25,4 +34,10 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+};

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,6 +1,7 @@
-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";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.js";
 import { Button } from "../ui/Button.js";
@@ -14,10 +15,27 @@ export type MdxComponentsType = Readonly<MDXComponents> | null | undefined;
 export const MdxComponents = {
   img: ({ node, ...props }) => {
     if (/\.(mp4|webm|mov|avi)$/.test(props.src ?? "")) {
-      return <video src={props.src} controls playsInline autoPlay loop />;
+      return (
+        // biome-ignore lint/a11y/useMediaCaption: No in control of the caption here
+        <video
+          src={props.src}
+          controls
+          playsInline
+          autoPlay
+          loop
+          className={cn("rounded-lg", props.className)}
+        />
+      );
     }
-    return <img {...props} className="rounded-md" />;
+    return (
+      <img
+        alt={props.alt}
+        {...props}
+        className={cn("rounded-lg", props.className)}
+      />
+    );
   },
+  Framed,
   h1: ({ children, id }) => (
     <Heading level={1} id={id}>
       {children}
@@ -91,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.test.ts

@@ -0,0 +1,24 @@
+import { humanFileSize } from "./humanFileSize.js";
+
+describe("humanFileSize", () => {
+  it("should handle zero bytes", () => {
+    expect(humanFileSize(0)).toBe("0 B");
+    expect(humanFileSize()).toBe("0 B");
+  });
+
+  it("should handle undefined bytes", () => {
+    expect(humanFileSize(undefined)).toBe("0 B");
+  });
+
+  it("should handle positive bytes", () => {
+    expect(humanFileSize(200)).toBe("200 B");
+    expect(humanFileSize(1000)).toBe("1.00 kB");
+    expect(humanFileSize(1000000)).toBe("1.00 MB");
+    expect(humanFileSize(1000000000)).toBe("1.00 GB");
+    expect(humanFileSize(1000000000000)).toBe("1.00 TB");
+    expect(humanFileSize(1000000000000000)).toBe("1.00 PB");
+    expect(humanFileSize(1000000000000000000)).toBe("1.00 EB");
+    expect(humanFileSize(1000000000000000000000)).toBe("1.00 ZB");
+    expect(humanFileSize(1000000000000000000000000)).toBe("1.00 YB");
+  });
+});

package/src/lib/util/humanFileSize.ts

@@ -0,0 +1,15 @@
+/**
+ * Converts a number of bytes to a human-readable file size string
+ * @param bytes - The number of bytes (defaults to 0)
+ * @returns A formatted string like "1.23 MB" or "456 B"
+ */
+export const humanFileSize = (bytes = 0) => {
+  if (bytes === 0) {
+    return "0 B";
+  }
+
+  const exponent = Math.floor(Math.log(bytes) / Math.log(1000.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
   /**
@@ -18,17 +19,19 @@ export default function invariant(
   throw new ZudokuError(provided ?? "Invariant failed");
 }
 
+export type ZudokuErrorOptions = {
+  developerHint?: string;
+  title?: string;
+  cause?: Error;
+};
+
 export class ZudokuError extends Error {
   public developerHint: string | undefined;
   public title: string | undefined;
 
   constructor(
     message: string,
-    {
-      developerHint,
-      title,
-      cause,
-    }: { developerHint?: string; title?: string; cause?: Error } = {},
+    { developerHint, title, cause }: ZudokuErrorOptions = {},
   ) {
     super(message, { cause });
     this.name = "ZudokuError";

package/src/lib/util/os.ts

@@ -0,0 +1,18 @@
+export function getOS(): "apple" | "linux" | "unix" | "windows" | undefined {
+  const notFound = -1;
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.indexOf("win") !== notFound) {
+    return "windows";
+  } else if (userAgent.indexOf("mac") !== notFound) {
+    return "apple";
+  } else if (userAgent.indexOf("linux") !== notFound) {
+    return "linux";
+  } else if (userAgent.indexOf("x11") !== notFound) {
+    return "unix";
+  }
+  return;
+}
+
+export function isAppleDevice(): boolean {
+  return getOS() === "apple";
+}

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/traverse.ts

@@ -32,3 +32,39 @@ export const traverse = <T extends JsonValue = RecordAny>(
 
   return result;
 };
+
+export const traverseAsync = async <T extends JsonValue = RecordAny>(
+  specification: RecordAny,
+  transform: (specification: RecordAny, path?: string[]) => T | Promise<T>,
+  path: string[] = [],
+) => {
+  const transformed = await transform(specification, path);
+  if (typeof transformed !== "object" || transformed === null) {
+    return transformed;
+  }
+
+  const result: RecordAny = Array.isArray(transformed) ? [] : {};
+
+  for (const [key, value] of Object.entries(transformed)) {
+    const currentPath = [...path, key];
+
+    if (Array.isArray(value)) {
+      result[key] = await Promise.all(
+        value.map(async (item, index) =>
+          typeof item === "object" && item != null
+            ? await traverseAsync(item, transform, [
+                ...currentPath,
+                index.toString(),
+              ])
+            : item,
+        ),
+      );
+    } else if (typeof value === "object" && value != null) {
+      result[key] = await traverseAsync(value, transform, currentPath);
+    } else {
+      result[key] = value;
+    }
+  }
+
+  return result;
+};

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/useCopyToClipboard.ts

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+
+export const useCopyToClipboard = (timeout = 2000) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyToClipboard = useCallback(
+    (text: string) => {
+      void navigator.clipboard.writeText(text);
+      setIsCopied(true);
+
+      setTimeout(() => setIsCopied(false), timeout);
+    },
+    [timeout],
+  );
+
+  return [isCopied, copyToClipboard] as const;
+};

package/src/lib/util/useExposedProps.tsx

@@ -1,10 +1,21 @@
 import {
+  type Location,
+  type NavigateFunction,
+  type Params,
+  type SetURLSearchParams,
   useLocation,
   useNavigate,
   useParams,
   useSearchParams,
 } from "react-router";
-import type { ExposedComponentProps } from "../components/SlotletProvider.js";
+
+export type ExposedComponentProps = {
+  location: Location;
+  navigate: NavigateFunction;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
+  params: Params;
+};
 
 export const useExposedProps = (): ExposedComponentProps => {
   const location = useLocation();

package/src/lib/util/useIsomorphicLayoutEffect.ts

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