@mehdad67/apitogo 0.1.24

package/src/lib/ui/Slider.tsx

@@ -0,0 +1,25 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <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-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;
+
+export { Slider };

package/src/lib/ui/Stepper.tsx

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from "react";
+
+// "stepper" class is defined in main.css
+const Stepper = ({ children }: PropsWithChildren) => {
+  return <div className="stepper">{children}</div>;
+};
+
+export { Stepper };

package/src/lib/ui/Switch.tsx

@@ -0,0 +1,26 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ 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-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}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/src/lib/ui/SyntaxHighlight.tsx

@@ -0,0 +1,54 @@
+import { memo } from "react";
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import { useHighlighter } from "../hooks/useHighlighter.js";
+import { highlight } from "../shiki.js";
+import { CodeBlock, type CodeBlockProps } from "./CodeBlock.js";
+import { EmbeddedCodeBlock } from "./EmbeddedCodeBlock.js";
+
+export const HighlightedCode = ({
+  code,
+  language,
+  meta,
+}: {
+  code: string;
+  language?: string;
+  meta?: string;
+}) => {
+  const { syntaxHighlighting } = useZudoku().options;
+  const highlighter = useHighlighter();
+
+  return highlight(
+    highlighter,
+    code,
+    language,
+    syntaxHighlighting?.themes,
+    meta,
+  );
+};
+
+type SyntaxHighlightProps = CodeBlockProps &
+  (
+    | {
+        code: string;
+        embedded?: boolean;
+        children?: never;
+        fullHeight?: boolean;
+      }
+    | { code?: never; children: string; embedded?: boolean }
+  );
+
+export const SyntaxHighlight = memo(
+  ({ code, children, embedded, ...props }: SyntaxHighlightProps) => {
+    const Wrapper = embedded ? EmbeddedCodeBlock : CodeBlock;
+
+    return (
+      <Wrapper {...props}>
+        <HighlightedCode code={code ?? children} language={props.language} />
+      </Wrapper>
+    );
+  },
+);
+
+SyntaxHighlight.displayName = "SyntaxHighlight";
+
+export default SyntaxHighlight;

package/src/lib/ui/Tabs.tsx

@@ -0,0 +1,52 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <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-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}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/lib/ui/Textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    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-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}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/lib/ui/Toggle.tsx

@@ -0,0 +1,42 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+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-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: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/src/lib/ui/ToggleGroup.tsx

@@ -0,0 +1,58 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+import { toggleVariants } from "./Toggle.js";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

package/src/lib/ui/Tooltip.tsx

@@ -0,0 +1,65 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { TooltipArrow } from "@radix-ui/react-tooltip";
+import type * as React from "react";
+import { cn } from "./util.js";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+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,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  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/ui/util.tsx

@@ -0,0 +1,8 @@
+import { cn as cnUtil } from "../util/cn.js";
+
+export const cn = cnUtil;
+
+export const focusRing = cn(
+  "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3",
+  "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:ring-3 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50",
+);

package/src/lib/util/MdxComponents.tsx

@@ -0,0 +1,150 @@
+import { Link } from "@lukoweb/apitogo/components";
+import { Alert } from "@lukoweb/apitogo/ui/Alert.js";
+import type { MDXComponents } from "mdx/types.js";
+import { lazy, Suspense } from "react";
+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-constants.js";
+import { Badge } from "../ui/Badge.js";
+import { Button } from "../ui/Button.js";
+import { Callout } from "../ui/Callout.js";
+import { CodeBlock } from "../ui/CodeBlock.js";
+import { CodeTabPanel } from "../ui/CodeTabPanel.js";
+import { Stepper } from "../ui/Stepper.js";
+import { cn } from "./cn.js";
+
+// Lazy-loaded to avoid pulling shiki/mermaid into the initial bundle.
+const SyntaxHighlight = lazy(() => import("../ui/SyntaxHighlight.js"));
+const Mermaid = lazy(() => import("../components/Mermaid.js"));
+const CodeTabs = lazy(() =>
+  import("../ui/CodeTabs.js").then((m) => ({ default: m.CodeTabs })),
+);
+
+export type MdxComponentsType = Readonly<MDXComponents> | null | undefined;
+
+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
+          playsInline
+          autoPlay
+          loop
+          className={cn("rounded-lg", props.className)}
+        />
+      );
+    }
+    return (
+      <img
+        alt={props.alt}
+        {...props}
+        className={cn("rounded-lg", props.className)}
+      />
+    );
+  },
+  Framed,
+  h1: ({ children, id }) => (
+    <Heading level={1} id={id}>
+      {children}
+    </Heading>
+  ),
+  h2: ({ children, id }) => (
+    <Heading level={2} id={id}>
+      {children}
+    </Heading>
+  ),
+  h3: ({ children, id }) => (
+    <Heading level={3} id={id}>
+      {children}
+    </Heading>
+  ),
+  h4: ({ children, id }) => (
+    <Heading level={4} id={id}>
+      {children}
+    </Heading>
+  ),
+  h5: ({ children, id }) => (
+    <Heading level={5} id={id}>
+      {children}
+    </Heading>
+  ),
+  h6: ({ children, id }) => (
+    <Heading level={6} id={id}>
+      {children}
+    </Heading>
+  ),
+  a: ({ href, node, ...props }) =>
+    href && !href.startsWith("http") ? (
+      <AnchorLink to={href} relative="path" {...props} />
+    ) : (
+      <a href={href} target="_blank" {...props} rel="noreferrer" />
+    ),
+  Link,
+  Alert,
+  Badge,
+  Button,
+  Callout,
+  Stepper,
+  Mermaid: (props) => (
+    <Suspense>
+      <Mermaid {...props} />
+    </Suspense>
+  ),
+  SyntaxHighlight: (props) => (
+    <Suspense>
+      <SyntaxHighlight {...props} />
+    </Suspense>
+  ),
+  tip: (props) => <Callout type="tip" {...props} />,
+  info: (props) => <Callout type="info" {...props} />,
+  note: (props) => <Callout type="note" {...props} />,
+  caution: (props) => <Callout type="caution" {...props} />,
+  warning: (props) => <Callout type="caution" {...props} />,
+  danger: (props) => <Callout type="danger" {...props} />,
+  CodeTabs: (props) => (
+    <Suspense>
+      <CodeTabs {...props} />
+    </Suspense>
+  ),
+  CodeTabPanel,
+  pre: (props) => (
+    <pre className={cn("not-prose my-4", props.className)} {...props} />
+  ),
+  code: ({
+    className,
+    node: _node,
+    children,
+    title,
+    icon,
+    inline,
+    showLineNumbers,
+    ...props
+  }) => {
+    const match = className?.match(/language-(\w+)/);
+
+    if (inline === "true" || inline === true) {
+      return (
+        <InlineCode className={cn(className, "inline")}>{children}</InlineCode>
+      );
+    }
+
+    return (
+      <CodeBlock
+        language={match?.[1]}
+        icon={icon}
+        showLanguageIndicator
+        showLineNumbers={showLineNumbers}
+        title={title}
+      >
+        <code className={cn(className, HIGHLIGHT_CODE_BLOCK_CLASS)} {...props}>
+          {children}
+        </code>
+      </CodeBlock>
+    );
+  },
+} satisfies MdxComponentsType;

package/src/lib/util/cn.ts

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

package/src/lib/util/createVariantComponent.tsx

@@ -0,0 +1,61 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { cva } from "class-variance-authority";
+import type { ClassValue } from "clsx";
+import type { HTMLElementType, JSX } from "react";
+import * as React 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 ComponentOrElement,
+  C extends ReturnType<typeof cva>,
+>(
+  tag: E,
+  cvx: ClassValue | C,
+  // variantProps: Array<keyof VariantProps<C>> = [],
+) => {
+  const MyVariant = React.forwardRef<
+    RefOf<E>,
+    PropsOf<E> & { className?: ClassValue; asChild?: boolean }
+  >(({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : tag;
+
+    return React.createElement(Comp, {
+      ...props,
+      ref: ref as React.Ref<HTMLElement>,
+      className:
+        typeof cvx === "function" ? cvx({ className }) : cn(cvx, className),
+    });
+  });
+
+  MyVariant.displayName =
+    typeof tag === "string"
+      ? `VariantComponent(${tag})`
+      : `VariantComponent(${tag.displayName || tag.name || "Component"})`;
+
+  return MyVariant;
+};
+
+export default createVariantComponent;

package/src/lib/util/ensureArray.ts

@@ -0,0 +1,3 @@
+export const ensureArray = <T extends NonNullable<unknown>>(
+  value: T | T[],
+): T[] => (Array.isArray(value) ? value : [value]);