@hogoshi/ui 0.0.0-stage → 0.1.0

package/src/components/theme-toggle.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { Moon02Icon, Sun01Icon } from "@hugeicons-pro/core-stroke-rounded";
+import { flushSync } from "react-dom";
+import { cn } from "../lib/cn";
+import { Icon } from "./icon";
+import { sidebarLabel } from "./sidebar";
+import { useTheme, type ResolvedMode } from "../theme/theme";
+
+const REVEAL_MS = 900;
+let switching = false;
+
+function applyMode(next: ResolvedMode) {
+  document.documentElement.setAttribute("data-mode", next);
+  document.documentElement.style.colorScheme = next;
+}
+
+function paintTheme(media: HTMLCanvasElement, mode: string | null) {
+  media.dispatchEvent(new CustomEvent("hogoshi-theme-paint", { detail: mode }));
+}
+
+function freeze(media: HTMLVideoElement | HTMLCanvasElement, copy: Element) {
+  const canvas = document.createElement("canvas");
+  canvas.className = media.className;
+  canvas.style.cssText = media.style.cssText;
+  canvas.width = media instanceof HTMLVideoElement ? media.videoWidth || media.clientWidth : media.width;
+  canvas.height = media instanceof HTMLVideoElement ? media.videoHeight || media.clientHeight : media.height;
+  const next = copy.closest("[data-mode]")?.getAttribute("data-mode") ?? null;
+  const current = document.documentElement.getAttribute("data-mode");
+  if (media instanceof HTMLCanvasElement && next) paintTheme(media, next);
+  try {
+    canvas.getContext("2d")?.drawImage(media, 0, 0, canvas.width, canvas.height);
+  } catch {
+    if (media instanceof HTMLCanvasElement && current) paintTheme(media, current);
+    return;
+  }
+  if (media instanceof HTMLCanvasElement && current) paintTheme(media, current);
+  copy.replaceWith(canvas);
+}
+
+function holdPage() {
+  const root = document.documentElement;
+  root.setAttribute("data-theme-switching", "");
+  const media = [...document.querySelectorAll("video, audio")].filter(
+    (node): node is HTMLMediaElement => node instanceof HTMLMediaElement && !node.paused,
+  );
+  media.forEach((node) => node.pause());
+  const running = document.getAnimations().filter((animation) => animation.playState === "running");
+  running.forEach((animation) => animation.pause());
+  const stop = (event: Event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key !== "Enter" && event.key !== " " && event.key !== "Escape") return;
+    stop(event);
+  };
+  const url = location.href;
+  const onPop = () => {
+    if (location.href !== url) history.pushState(null, "", url);
+  };
+  document.addEventListener("click", stop, true);
+  document.addEventListener("auxclick", stop, true);
+  document.addEventListener("submit", stop, true);
+  document.addEventListener("keydown", onKey, true);
+  document.addEventListener("wheel", stop, { capture: true, passive: false });
+  document.addEventListener("touchmove", stop, { capture: true, passive: false });
+  window.addEventListener("popstate", onPop);
+  return () => {
+    document.removeEventListener("click", stop, true);
+    document.removeEventListener("auxclick", stop, true);
+    document.removeEventListener("submit", stop, true);
+    document.removeEventListener("keydown", onKey, true);
+    document.removeEventListener("wheel", stop, true);
+    document.removeEventListener("touchmove", stop, true);
+    window.removeEventListener("popstate", onPop);
+    root.removeAttribute("data-theme-switching");
+    running.forEach((animation) => {
+      try {
+        animation.play();
+      } catch {
+        return;
+      }
+    });
+    media.forEach((node) => void node.play().catch(() => undefined));
+  };
+}
+
+function snapshot(next: ResolvedMode) {
+  const body = document.body;
+  const originals = [...body.querySelectorAll("*")];
+  const page = document.createElement("div");
+  page.className = body.className;
+  page.style.cssText = body.style.cssText;
+  page.append(...body.cloneNode(true).childNodes);
+
+  const layer = document.createElement("div");
+  layer.className = "hogoshi-theme-layer";
+  layer.setAttribute("aria-hidden", "true");
+  layer.setAttribute("data-mode", next);
+  layer.inert = true;
+  layer.append(page);
+  body.append(layer);
+
+  const copies = [...page.querySelectorAll("*")];
+  originals.forEach((node, at) => {
+    const copy = copies[at];
+    if (!copy) return;
+    if (node.scrollTop || node.scrollLeft) {
+      copy.scrollTop = node.scrollTop;
+      copy.scrollLeft = node.scrollLeft;
+    }
+    if (node instanceof HTMLElement && copy instanceof HTMLElement) {
+      const style = getComputedStyle(node);
+      if (style.animationName && style.animationName !== "none") {
+        copy.style.animation = "none";
+        copy.style.opacity = style.opacity;
+        copy.style.filter = style.filter;
+        copy.style.transform = style.transform;
+      }
+    }
+    if (node instanceof HTMLVideoElement || node instanceof HTMLCanvasElement) freeze(node, copy);
+  });
+  layer.scrollTop = window.scrollY;
+  layer.scrollLeft = window.scrollX;
+  return layer;
+}
+
+function reveal(layer: HTMLElement, inward: boolean) {
+  const radius = Math.ceil(Math.hypot(window.innerWidth, window.innerHeight));
+  const full = `circle(${radius}px at 50% 50%)`;
+  const none = "circle(0px at 50% 50%)";
+  if (inward) layer.style.clipPath = full;
+  return layer
+    .animate(inward ? [{ clipPath: full }, { clipPath: none }] : [{ clipPath: none }, { clipPath: full }], {
+      duration: REVEAL_MS,
+      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+      fill: "forwards",
+    })
+    .finished.catch(() => undefined);
+}
+
+export function ThemeToggle({
+  className,
+  label,
+  hideLabel = false,
+}: {
+  className?: string;
+  label?: string;
+  hideLabel?: boolean;
+}) {
+  const { resolved, setMode } = useTheme();
+
+  const swap = (next: ResolvedMode) => {
+    flushSync(() => setMode(next));
+    applyMode(next);
+  };
+
+  const onClick = () => {
+    if (switching) return;
+    const root = document.documentElement;
+    const next = root.getAttribute("data-mode") === "dark" ? "light" : "dark";
+    const reduce =
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches || root.getAttribute("data-motion") === "off";
+    if (reduce) {
+      swap(next);
+      return;
+    }
+
+    switching = true;
+    const release = holdPage();
+    const current = next === "dark" ? "light" : "dark";
+    const inward = next === "dark";
+    const layer = snapshot(inward ? current : next);
+    const finish = () => {
+      layer.remove();
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          release();
+          switching = false;
+        });
+      });
+    };
+    if (inward) {
+      const radius = Math.ceil(Math.hypot(window.innerWidth, window.innerHeight));
+      layer.style.clipPath = `circle(${radius}px at 50% 50%)`;
+      swap(next);
+      void reveal(layer, true).then(finish);
+      return;
+    }
+    void reveal(layer, false).then(() => {
+      swap(next);
+      finish();
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "text-fg-muted hover:bg-bg-subtle hover:text-fg inline-flex cursor-pointer items-center gap-2 rounded-[var(--radius-sm)] text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        label
+          ? "h-[calc(var(--row-h)-0.25rem)] w-full justify-start overflow-hidden px-3 whitespace-nowrap"
+          : "size-8 justify-center",
+        className,
+      )}
+      aria-label={label ?? (resolved === "dark" ? "Switch to light" : "Switch to dark")}
+      onClick={onClick}
+    >
+      <Icon icon={resolved === "dark" ? Sun01Icon : Moon02Icon} variant="stroke" size={16} className="shrink-0" />
+      {label ? <span className={cn(sidebarLabel, hideLabel && "opacity-0")}>{label}</span> : null}
+    </button>
+  );
+}

package/src/components/toaster.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Toaster as Sonner, toast } from "sonner";
+import { useTheme } from "../theme/theme";
+
+export { toast };
+
+export function Toaster() {
+  const { resolved } = useTheme();
+  return (
+    <Sonner
+      theme={resolved}
+      position="bottom-right"
+      closeButton
+      offset={{
+        bottom: "calc(24px + var(--safe-bottom))",
+        right: "calc(24px + var(--safe-right))",
+      }}
+      mobileOffset={{
+        bottom: "calc(5.75rem + var(--safe-bottom))",
+        left: "calc(16px + var(--safe-left))",
+        right: "calc(16px + var(--safe-right))",
+      }}
+      style={{ zIndex: "var(--z-toast)" }}
+      toastOptions={{
+        classNames: {
+          toast:
+            "hogoshi-grab! bg-bg-elevated! text-fg! border-border! border! shadow-[var(--shadow-md)]! rounded-[var(--radius-md)]! select-none!",
+          title: "pointer-events-none! select-none!",
+          description: "text-fg-muted! pointer-events-none! select-none!",
+          actionButton: "bg-accent! text-accent-fg! pointer-events-auto!",
+          cancelButton: "bg-bg-subtle! text-fg-muted! pointer-events-auto!",
+          closeButton: "pointer-events-auto!",
+        },
+      }}
+    />
+  );
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import type { ComponentProps, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { PopupArrow, popupMotion } from "./popup";
+
+export function TooltipProvider({ children }: { children: ReactNode }) {
+  return <BaseTooltip.Provider delay={200}>{children}</BaseTooltip.Provider>;
+}
+
+export const Tooltip = BaseTooltip.Root;
+
+export function TooltipTrigger({ className, ...props }: ComponentProps<typeof BaseTooltip.Trigger>) {
+  return <BaseTooltip.Trigger className={className} {...props} />;
+}
+
+export function TooltipContent({
+  className,
+  children,
+  side = "top",
+  align = "center",
+  ...props
+}: ComponentProps<typeof BaseTooltip.Popup> &
+  Pick<ComponentProps<typeof BaseTooltip.Positioner>, "side" | "align">) {
+  return (
+    <BaseTooltip.Portal>
+      <BaseTooltip.Positioner side={side} align={align} sideOffset={8} className="z-[var(--z-popover)]">
+        <BaseTooltip.Popup
+          className={cn(
+            "bg-fg text-bg w-max max-w-64 rounded-[var(--radius-sm)] px-2 py-1 text-xs whitespace-nowrap shadow-[var(--shadow-sm)]",
+            popupMotion,
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <PopupArrow arrow={BaseTooltip.Arrow} inverted />
+        </BaseTooltip.Popup>
+      </BaseTooltip.Positioner>
+    </BaseTooltip.Portal>
+  );
+}