@inklu/docs 0.2.0

package/src/components/ui/toast.tsx

@@ -0,0 +1,322 @@
+"use client";
+
+import { Toast } from "@base-ui/react/toast";
+import {
+  CheckCircledIcon,
+  CrossCircledIcon,
+  ExclamationTriangleIcon,
+  InfoCircledIcon,
+  ReloadIcon,
+} from "@radix-ui/react-icons";
+import type React from "react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const TOAST_ICONS = {
+  error: CrossCircledIcon,
+  info: InfoCircledIcon,
+  loading: ReloadIcon,
+  success: CheckCircledIcon,
+  warning: ExclamationTriangleIcon,
+} as const;
+
+type SwipeDirection = "up" | "down" | "left" | "right";
+
+type ToastData = {
+  rootProps?: Omit<
+    React.ComponentProps<typeof Toast.Root>,
+    "children" | "className" | "swipeDirection" | "toast"
+  >;
+  tooltipStyle?: boolean;
+};
+
+function getSwipeDirection(position: ToastPosition): SwipeDirection[] {
+  const verticalDirection: SwipeDirection = position.startsWith("top")
+    ? "up"
+    : "down";
+
+  if (position.includes("center")) {
+    return [verticalDirection];
+  }
+
+  if (position.includes("left")) {
+    return ["left", verticalDirection];
+  }
+
+  return ["right", verticalDirection];
+}
+
+function upsertReplayClassName(toast: {
+  type?: string;
+  updateKey?: number;
+}): string | undefined {
+  const k = toast.updateKey ?? 0;
+  if (k <= 0) return undefined;
+  const isEven = k % 2 === 0;
+  if (toast.type === "error") {
+    return isEven ? "animate-toast-error-even" : "animate-toast-error-odd";
+  }
+  return isEven ? "animate-toast-success-even" : "animate-toast-success-odd";
+}
+
+function Toasts({
+  position,
+  portalProps,
+}: {
+  position: ToastPosition;
+  portalProps?: React.ComponentProps<typeof Toast.Portal>;
+}): React.ReactElement {
+  const { toasts } = Toast.useToastManager();
+  const swipeDirection = getSwipeDirection(position);
+
+  return (
+    <Toast.Portal data-slot="toast-portal" {...portalProps}>
+      <Toast.Viewport
+        className={cn(
+          "fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]",
+          // Vertical positioning
+          "data-[position*=top]:top-(--toast-inset)",
+          "data-[position*=bottom]:bottom-(--toast-inset)",
+          // Horizontal positioning
+          "data-[position*=left]:left-(--toast-inset)",
+          "data-[position*=right]:right-(--toast-inset)",
+          "data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2",
+        )}
+        data-position={position}
+        data-slot="toast-viewport"
+      >
+        {toasts.map((toast) => {
+          const Icon = toast.type
+            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]
+            : null;
+          const toastData = toast.data as ToastData | undefined;
+
+          return (
+            <Toast.Root
+              key={toast.id}
+              className={cn(
+                "absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-popover text-popover-foreground [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s]",
+                // Base positioning using data-position
+                "data-[position*=right]:right-0 data-[position*=right]:left-auto",
+                "data-[position*=left]:right-auto data-[position*=left]:left-0",
+                "data-[position*=center]:right-0 data-[position*=center]:left-0",
+                "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-[50%_calc(50%-50%*min(var(--toast-index,0),1))]",
+                "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-[50%_calc(50%+50%*min(var(--toast-index,0),1))]",
+                // Gap fill for hover
+                "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full",
+                "data-[position*=top]:after:top-full",
+                "data-[position*=bottom]:after:bottom-full",
+                // Define some variables
+                "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]",
+                // Define offset-y variable
+                "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]",
+                "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]",
+                // Default state transform
+                "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
+                "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
+                // Limited state
+                "data-limited:opacity-0",
+                // Expanded state
+                "data-expanded:h-(--toast-height)",
+                "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]",
+                // Starting and ending animations
+                "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]",
+                "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-ending-style:opacity-0",
+                // Ending animations (direction-aware)
+                "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
+                "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
+                // Ending animations (expanded)
+                "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
+                upsertReplayClassName(toast),
+              )}
+              {...toastData?.rootProps}
+              data-position={position}
+              swipeDirection={swipeDirection}
+              toast={toast}
+            >
+              <Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100">
+                <div className="flex gap-2">
+                  {Icon && (
+                    <div
+                      className="[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+                      data-slot="toast-icon"
+                    >
+                      <Icon className="in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" />
+                    </div>
+                  )}
+
+                  <div className="flex flex-col gap-0.5">
+                    <Toast.Title
+                      className="font-medium"
+                      data-slot="toast-title"
+                    />
+                    <Toast.Description
+                      className="text-muted-foreground"
+                      data-slot="toast-description"
+                    />
+                  </div>
+                </div>
+                {toast.actionProps && (
+                  <Toast.Action
+                    className={buttonVariants({ size: "xs" })}
+                    data-slot="toast-action"
+                  >
+                    {toast.actionProps.children}
+                  </Toast.Action>
+                )}
+              </Toast.Content>
+            </Toast.Root>
+          );
+        })}
+      </Toast.Viewport>
+    </Toast.Portal>
+  );
+}
+
+function AnchoredToasts({
+  portalProps,
+}: {
+  portalProps?: React.ComponentProps<typeof Toast.Portal>;
+}): React.ReactElement {
+  const { toasts } = Toast.useToastManager();
+
+  return (
+    <Toast.Portal data-slot="toast-portal-anchored" {...portalProps}>
+      <Toast.Viewport
+        className="outline-none"
+        data-slot="toast-viewport-anchored"
+      >
+        {toasts.map((toast) => {
+          const Icon = toast.type
+            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]
+            : null;
+          const toastData = toast.data as ToastData | undefined;
+          const tooltipStyle = toastData?.tooltipStyle ?? false;
+          const positionerProps = toast.positionerProps;
+
+          if (!positionerProps?.anchor) {
+            return null;
+          }
+
+          return (
+            <Toast.Positioner
+              key={toast.id}
+              className="z-50 max-w-[min(--spacing(64),var(--available-width))]"
+              data-slot="toast-positioner"
+              sideOffset={positionerProps.sideOffset ?? 4}
+              toast={toast}
+            >
+              <Toast.Root
+                className={cn(
+                  "relative text-balance border bg-popover text-popover-foreground text-xs transition-[scale,opacity] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0",
+                  tooltipStyle ? "rounded-md" : "rounded-lg",
+                  upsertReplayClassName(toast),
+                )}
+                {...toastData?.rootProps}
+                data-slot="toast-popup"
+                toast={toast}
+              >
+                {tooltipStyle ? (
+                  <Toast.Content className="pointer-events-auto px-2 py-1">
+                    <Toast.Title data-slot="toast-title" />
+                  </Toast.Content>
+                ) : (
+                  <Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm">
+                    <div className="flex gap-2">
+                      {Icon && (
+                        <div
+                          className="[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+                          data-slot="toast-icon"
+                        >
+                          <Icon className="in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" />
+                        </div>
+                      )}
+
+                      <div className="flex flex-col gap-0.5">
+                        <Toast.Title
+                          className="font-medium"
+                          data-slot="toast-title"
+                        />
+                        <Toast.Description
+                          className="text-muted-foreground"
+                          data-slot="toast-description"
+                        />
+                      </div>
+                    </div>
+                    {toast.actionProps && (
+                      <Toast.Action
+                        className={buttonVariants({ size: "xs" })}
+                        data-slot="toast-action"
+                      >
+                        {toast.actionProps.children}
+                      </Toast.Action>
+                    )}
+                  </Toast.Content>
+                )}
+              </Toast.Root>
+            </Toast.Positioner>
+          );
+        })}
+      </Toast.Viewport>
+    </Toast.Portal>
+  );
+}
+
+export const toastManager: ReturnType<typeof Toast.createToastManager> =
+  Toast.createToastManager();
+
+export const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =
+  Toast.createToastManager();
+
+export type ToastPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+export interface ToastProviderProps extends Toast.Provider.Props {
+  position?: ToastPosition;
+  portalProps?: React.ComponentProps<typeof Toast.Portal>;
+}
+
+export function ToastProvider({
+  children,
+  position = "bottom-right",
+  portalProps,
+  ...props
+}: ToastProviderProps): React.ReactElement {
+  return (
+    <Toast.Provider toastManager={toastManager} {...props}>
+      {children}
+      <Toasts portalProps={portalProps} position={position} />
+    </Toast.Provider>
+  );
+}
+
+export interface AnchoredToastProviderProps extends Toast.Provider.Props {
+  portalProps?: React.ComponentProps<typeof Toast.Portal>;
+}
+
+export function AnchoredToastProvider({
+  children,
+  portalProps,
+  ...props
+}: AnchoredToastProviderProps): React.ReactElement {
+  return (
+    <Toast.Provider toastManager={anchoredToastManager} {...props}>
+      {children}
+      <AnchoredToasts portalProps={portalProps} />
+    </Toast.Provider>
+  );
+}
+
+export { Toast as ToastPrimitive };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 duration-150 ease-out data-instant:duration-0 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface UseCopyToClipboardOptions {
+  timeout?: number;
+  onCopy?: () => void;
+}
+
+export function useCopyToClipboard(options: UseCopyToClipboardOptions = {}) {
+  const { timeout = 2000, onCopy } = options;
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
+
+  const copyToClipboard = useCallback(
+    async (value: string) => {
+      if (!value || typeof window === "undefined" || !navigator.clipboard) {
+        return false;
+      }
+
+      try {
+        if (timeoutRef.current) {
+          window.clearTimeout(timeoutRef.current);
+        }
+
+        await navigator.clipboard.writeText(value);
+        setIsCopied(true);
+        onCopy?.();
+
+        if (timeout > 0) {
+          timeoutRef.current = window.setTimeout(() => {
+            setIsCopied(false);
+          }, timeout);
+        }
+        return true;
+      } catch (error) {
+        console.error("Failed to copy to clipboard", error);
+        return false;
+      }
+    },
+    [timeout, onCopy],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    copyToClipboard,
+    isCopied,
+  };
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+"use client";
+
+export * from "./components/content/changelog-content";
+export * from "./components/content/code-block";
+export * from "./components/content/docs-content";
+export * from "./components/layout/docs-layout";
+export * from "./components/layout/site-header";
+export * from "./components/layout/site-layout";
+export * from "./components/layout/site-provider";
+export * from "./components/layout/site-template";
+export * from "./components/layout/theme-provider";
+export * from "./components/layout/theme-switcher";
+export * from "./components/motion-primitives/sliding-number";
+export * from "./components/motion-primitives/text-effect";
+export * from "./components/motion-primitives/text-morph";
+export * from "./components/shared/command-block";
+export * from "./components/shared/scroll-fade";
+export * from "./components/ui/badge";
+export * from "./components/ui/brand-logo";
+export * from "./components/ui/button";
+export * from "./components/ui/button-group";
+export * from "./components/ui/card";
+export * from "./components/ui/direction";
+export * from "./components/ui/hover-card";
+export * from "./components/ui/item";
+export * from "./components/ui/separator";
+export * from "./components/ui/toast";
+export * from "./components/ui/tooltip";
+
+export * from "./lib/motions";

package/src/lib/constants.ts

@@ -0,0 +1,63 @@
+export type ChangeKind = "new" | "improved" | "fixed";
+
+export const NAV = [
+  { href: "/", label: "Home" },
+  { href: "/docs", label: "Docs" },
+  { href: "/changelog", label: "Changelog" },
+] as const;
+
+export const CHANGELOG = [
+  {
+    version: "1.1.0",
+    title: "The Components Update",
+    date: "2024-03-15",
+    summary:
+      "Introduced a new suite of reusable components to accelerate your workflow.",
+    changes: [
+      {
+        kind: "new" as ChangeKind,
+        text: "Added generic button component with variants.",
+      },
+      {
+        kind: "new" as ChangeKind,
+        text: "Added customizable dialog and modal components.",
+      },
+      {
+        kind: "improved" as ChangeKind,
+        text: "Enhanced accessibility across all interactive elements.",
+      },
+    ],
+  },
+  {
+    version: "1.0.1",
+    title: "Bug Fixes",
+    date: "2024-01-10",
+    summary: "Minor fixes and performance improvements.",
+    changes: [
+      {
+        kind: "fixed" as ChangeKind,
+        text: "Fixed hydration error on initial load.",
+      },
+      {
+        kind: "improved" as ChangeKind,
+        text: "Optimized font loading for better Core Web Vitals.",
+      },
+    ],
+  },
+  {
+    version: "1.0.0",
+    title: "Initial Release",
+    date: "2024-01-01",
+    summary: "First version of the project.",
+    changes: [
+      {
+        kind: "new" as ChangeKind,
+        text: "Added initial template architecture.",
+      },
+      {
+        kind: "new" as ChangeKind,
+        text: "Established monochromatic Liquid Glass design tokens.",
+      },
+    ],
+  },
+];

package/src/lib/motions.ts

@@ -0,0 +1,21 @@
+export const EASE_OUT = [0.22, 1, 0.36, 1] as const;
+export const REVEAL_DURATION = 0.28;
+export const HERO_STAGGER = 0.06;
+
+export const heroChild = {
+  hidden: { opacity: 0, y: 12 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: REVEAL_DURATION, ease: EASE_OUT },
+  },
+};
+
+export const colReveal = {
+  hidden: { opacity: 0, y: 12 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: REVEAL_DURATION, ease: EASE_OUT },
+  },
+};

package/src/lib/utils/audio.ts

@@ -0,0 +1,56 @@
+"use client";
+
+function playBeep(
+  frequency: number,
+  duration: number,
+  type: OscillatorType = "sine",
+) {
+  if (
+    typeof window === "undefined" ||
+    // biome-ignore lint/suspicious/noExplicitAny: window may not have webkitAudioContext
+    (!window.AudioContext && !(window as any).webkitAudioContext)
+  )
+    return;
+  try {
+    const AudioContext =
+      // biome-ignore lint/suspicious/noExplicitAny: window may not have webkitAudioContext
+      window.AudioContext || (window as any).webkitAudioContext;
+    const ctx = new AudioContext();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+
+    osc.type = type;
+    osc.frequency.setValueAtTime(frequency, ctx.currentTime);
+
+    gain.gain.setValueAtTime(0.1, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
+
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+
+    osc.start();
+    osc.stop(ctx.currentTime + duration);
+  } catch (_e) {
+    // Ignore audio errors
+  }
+}
+
+export function tap() {
+  playBeep(400, 0.1);
+}
+
+export function turn(direction: "back" | "forward") {
+  if (direction === "forward") {
+    playBeep(600, 0.1);
+  } else {
+    playBeep(300, 0.1);
+  }
+}
+
+export function copy() {
+  playBeep(800, 0.15, "triangle");
+}
+
+export function deny() {
+  playBeep(150, 0.2, "sawtooth");
+}

package/src/lib/utils.ts

@@ -0,0 +1,14 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatChangelogDate(date: string) {
+  return new Date(date).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}

package/src/shiki.ts

@@ -0,0 +1,25 @@
+import { codeToHtml } from "shiki";
+
+export type SnippetInput = Record<string, { code: string; lang: string }>;
+
+export async function highlightSnippets<T extends SnippetInput>(
+  snippets: T,
+  options?: { lightTheme?: string; darkTheme?: string },
+): Promise<Record<keyof T, string>> {
+  const light = options?.lightTheme || "github-light";
+  const dark = options?.darkTheme || "github-dark";
+
+  const entries = await Promise.all(
+    Object.entries(snippets).map(
+      async ([key, s]) =>
+        [
+          key,
+          await codeToHtml(s.code, {
+            lang: s.lang,
+            themes: { light, dark },
+          }),
+        ] as const,
+    ),
+  );
+  return Object.fromEntries(entries) as Record<keyof T, string>;
+}