zudoku 0.0.0-fdf886de → 0.0.0-fe92c9e1

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,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} 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">
+      <CardContent className="p-0">
+        <CardHeader className="border-b mb-1 px-4 py-5">
+          <CardTitle>Component Properties</CardTitle>
+          <CardDescription>The properties of the component.</CardDescription>
+        </CardHeader>
+        <div className="grid grid-cols-[1fr_auto_auto] gap-2 divide-y -mx-4 px-4">
+          {Object.entries(docgen.props).map(([key, value]) => (
+            <div
+              key={key}
+              className="px-4 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>
+      </CardContent>
+    </Card>
+  );
+};

package/src/lib/ui/Secret.tsx

@@ -0,0 +1,123 @@
+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 SecretText = ({
+  secret,
+  revealed = false,
+  previewChars = 5,
+  className,
+}: {
+  secret: string;
+  revealed?: boolean;
+  previewChars?: number;
+  className?: string;
+}) => {
+  return (
+    <span className={cn("w-full truncate", className)}>
+      <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>
+  );
+};
+
+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",
+            )}
+          />
+        )}
+        <SecretText
+          secret={secret}
+          revealed={revealed}
+          previewChars={previewChars}
+        />
+      </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/Separator.tsx

@@ -0,0 +1,25 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
+import { cn } from "../util/cn.js";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/lib/ui/SyntaxHighlight.tsx

@@ -7,7 +7,12 @@ import { EmbeddedCodeBlock } from "./EmbeddedCodeBlock.js";
 
 type SyntaxHighlightProps = CodeBlockProps &
   (
-    | { code: string; embedded?: boolean; children?: never }
+    | {
+        code: string;
+        embedded?: boolean;
+        children?: never;
+        fullHeight?: boolean;
+      }
     | { code?: never; children: string; embedded?: boolean }
   );
 

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

@@ -1,43 +1,65 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import { TooltipArrow } from "@radix-ui/react-tooltip";
+import type * as React from "react";
+import { cn } from "./util.js";
 
-import { cn } from "../util/cn.js";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
 
-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>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 export {
   Tooltip,
-  TooltipArrow,
+  TooltipTrigger,
   TooltipContent,
   TooltipProvider,
-  TooltipTrigger,
+  TooltipArrow,
 };

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,11 +1,12 @@
-import { type MDXComponents } from "mdx/types.js";
-import { CodeBlock } from "zudoku/ui/CodeBlock.js";
+import type { MDXComponents } from "mdx/types.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 { HIGHLIGHT_CODE_BLOCK_CLASS } from "../shiki.js";
 import { Button } from "../ui/Button.js";
 import { Callout } from "../ui/Callout.js";
+import { CodeBlock } from "../ui/CodeBlock.js";
 import { Stepper } from "../ui/Stepper.js";
 import { SyntaxHighlight } from "../ui/SyntaxHighlight.js";
 import { cn } from "./cn.js";
@@ -16,6 +17,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 +28,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 +110,7 @@ export const MdxComponents = {
         showLineNumbers={showLineNumbers}
         title={title}
       >
-        <code className={cn(className, "not-inline")} {...props}>
+        <code className={cn(className, HIGHLIGHT_CODE_BLOCK_CLASS)} {...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,12 +1,35 @@
 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";
 
+type ComponentOrElement =
+  | HTMLElementType
+  // biome-ignore lint/suspicious/noExplicitAny: Need to accept any component type
+  | React.ComponentType<any>
+  // biome-ignore lint/suspicious/noExplicitAny: Need to accept any component type
+  | React.ForwardRefExoticComponent<any>;
+
+type PropsOf<T> = T extends HTMLElementType
+  ? JSX.IntrinsicElements[T]
+  : T extends React.ComponentType<infer P>
+    ? P
+    : T extends React.ForwardRefExoticComponent<infer P>
+      ? P
+      : never;
+
+type RefOf<T> = T extends HTMLElementType
+  ? T extends keyof HTMLElementTagNameMap
+    ? HTMLElementTagNameMap[T]
+    : HTMLElement
+  : T extends React.ForwardRefExoticComponent<React.RefAttributes<infer R>>
+    ? R
+    : HTMLElement;
+
 const createVariantComponent = <
-  E extends HTMLElementType,
+  E extends ComponentOrElement,
   C extends ReturnType<typeof cva>,
 >(
   tag: E,
@@ -14,20 +37,23 @@ const createVariantComponent = <
   // variantProps: Array<keyof VariantProps<C>> = [],
 ) => {
   const MyVariant = React.forwardRef<
-    HTMLElement,
-    JSX.IntrinsicElements[E] & { className?: ClassValue; asChild?: boolean }
+    RefOf<E>,
+    PropsOf<E> & { className?: ClassValue; asChild?: boolean }
   >(({ className, asChild, ...props }, ref) => {
     const Comp = asChild ? Slot : tag;
 
     return React.createElement(Comp, {
       ...props,
-      ref,
+      ref: ref as React.Ref<HTMLElement>,
       className:
         typeof cvx === "function" ? cvx({ className }) : cn(cvx, className),
     });
   });
 
-  MyVariant.displayName = `VariantComponent(${tag})`;
+  MyVariant.displayName =
+    typeof tag === "string"
+      ? `VariantComponent(${tag})`
+      : `VariantComponent(${tag.displayName || tag.name || "Component"})`;
 
   return MyVariant;
 };