@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/stock/ui/dialog.tsx

@@ -0,0 +1,163 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { cn } from "../../../../lib/utils"
+
+import { XIcon } from "lucide-react"
+
+import { Button } from "./button"
+import { stockPortalProps, useStockShape } from "../stock-shape"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-(--dur-fast) supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  const stock = useStockShape()
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        {...stockPortalProps(stock)}
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-surface-2 p-4 text-sm text-ink ring-1 ring-foreground/10 duration-(--dur-fast) outline-none sm:max-w-sm 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}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-surface-2/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "cn-font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-ink-mute *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-ink",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/src/components/chat/stock/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "../../../../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-surface-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/chat/stock/ui/textarea.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "../../../../lib/utils"
+import { useStockShape } from "../stock-shape"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  const stock = useStockShape()
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-none border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-ink-mute focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-accent/50 disabled:cursor-not-allowed disabled:bg-surface-2/50 disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-3 aria-invalid:ring-danger/20 md:text-sm dark:bg-surface-2/30 dark:disabled:bg-surface-2/80 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40",
+        stock && "rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/chat/stock/ui/tooltip.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { cn } from "../../../../lib/utils"
+import { useStockShape } from "../stock-shape"
+
+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"
+  >) {
+  const stock = useStockShape()
+  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-none bg-ink px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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-none 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",
+            stock && "rounded-md **:data-[slot=kbd]:rounded-sm",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-ink 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/components/chat/stock/use-attachment-src.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAuiState } from "@assistant-ui/react";
+import { useShallow } from "zustand/react/shallow";
+
+const useFileSrc = (file: File | undefined) => {
+  const [entry, setEntry] = useState<{ file: File; url: string } | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    if (!file) {
+      setEntry(undefined);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    setEntry({ file, url: objectUrl });
+
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+
+  return entry !== undefined && entry.file === file ? entry.url : undefined;
+};
+
+export const useAttachmentSrc = () => {
+  const { file, src } = useAuiState(
+    useShallow((s): { file?: File; src?: string } => {
+      if (s.attachment.type !== "image") return {};
+      if (s.attachment.file) return { file: s.attachment.file };
+      const src = s.attachment.content?.filter((c) => c.type === "image")[0]
+        ?.image;
+      if (!src) return {};
+      return { src };
+    }),
+  );
+
+  return useFileSrc(file) ?? src;
+};

package/src/components/chat/stock/use-copy-to-clipboard.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+
+export type UseCopyToClipboardOptions = {
+  copiedDuration?: number;
+};
+
+export const useCopyToClipboard = ({
+  copiedDuration = 3000,
+}: UseCopyToClipboardOptions = {}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const copyToClipboard = (value: string) => {
+    if (!value || typeof navigator === "undefined" || !navigator.clipboard) {
+      return;
+    }
+
+    navigator.clipboard.writeText(value).then(
+      () => {
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), copiedDuration);
+      },
+      () => {},
+    );
+  };
+
+  return { isCopied, copyToClipboard };
+};

package/src/components/chat/strip-model-boilerplate.ts

@@ -0,0 +1,42 @@
+/**
+ * DeepSeek models sometimes echo their own search-template instruction into
+ * the visible answer ("Use the results below to formulate an answer to the
+ * user question unless additional information is needed"), often twice in a
+ * row. It is never content, so drop it from rendered markdown (DIG-1210).
+ */
+const PHRASE =
+  "Use the results below to formulate an answer to the user question unless additional information is needed";
+
+const esc = (t: string) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+// Words joined by flexible whitespace, so line-wrapped copies still match.
+const FULL = PHRASE.split(" ").map(esc).join("\\s+");
+/** One or more back-to-back full copies, with or without separators. */
+const REPEATED = new RegExp(`\\s*(?:${FULL}\\s*[.,;:]?\\s*)+`, "gi");
+
+/** Drop a copy cut off mid-phrase at the very end (streaming or truncated). */
+function stripTrailingPartial(text: string): string {
+  const lower = text.toLowerCase();
+  const at = lower.lastIndexOf("use the");
+  if (at < 0) return text;
+  const tail = lower.slice(at).replace(/\s+/g, " ").trimEnd();
+  return PHRASE.toLowerCase().startsWith(tail) ? text.slice(0, at).trimEnd() : text;
+}
+
+export function stripModelBoilerplate(text: string): string {
+  const out = text.replace(REPEATED, (_m, offset: number) => (offset === 0 ? "" : " "));
+  return stripTrailingPartial(out).replace(/ {2,}/g, " ");
+}
+
+type TextNode = { type: string; value?: string; children?: TextNode[] };
+
+function walk(node: TextNode): void {
+  if (node.type === "text" && typeof node.value === "string") {
+    node.value = stripModelBoilerplate(node.value);
+  }
+  for (const child of node.children ?? []) walk(child);
+}
+
+/** remark plugin: strip the boilerplate from every text node. */
+export function remarkStripModelBoilerplate() {
+  return (tree: TextNode) => walk(tree);
+}

package/src/components/chat/suggestion-cycle.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+/**
+ * The empty-state starter chips, capped and cycled.
+ *
+ * A tenant defines its own starter list (eight for the house tenant, five for
+ * the trial) and the welcome used to print all of them, turning the empty state into
+ * a wall of prompts. Four is what fits on one line of reading; the rest are
+ * reached by cycling, so every defined starter is still seen.
+ *
+ * The cycle is deliberately polite:
+ * - it pauses while the pointer is over the chips or focus is inside them,
+ *   because a list that changes under the cursor is a list you cannot click;
+ * - it stops for good once the conversation has started or the composer holds
+ *   text, so the prompts never move under someone who is reading them while
+ *   composing;
+ * - it never starts under `prefers-reduced-motion: reduce`, which pins the
+ *   first group;
+ * - the timer is cleared on unmount and whenever those conditions stop it, so
+ *   nothing ticks in the background.
+ *
+ * The group size is constant, so a swap never reflows the row: the wrapper is
+ * keyed by the group offset and the chips re-run their existing entrance fade
+ * (house duration tokens) instead of the row growing or shrinking.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type FocusEventHandler,
+  type PointerEventHandler,
+  type ReactNode,
+} from "react";
+
+/** How many starter chips are on screen at once. */
+export const VISIBLE_SUGGESTIONS = 4;
+
+/** How long a group stays before the next one fades in. */
+export const SUGGESTION_CYCLE_MS = 8_000;
+
+/**
+ * The window of `all` starting at `offset`, wrapping. Returns the whole list
+ * when it already fits, so a tenant with 3 starters is never padded.
+ */
+export function suggestionWindow(
+  all: readonly string[],
+  offset: number,
+): readonly string[] {
+  if (all.length <= VISIBLE_SUGGESTIONS) return all;
+  const start = ((offset % all.length) + all.length) % all.length;
+  return Array.from(
+    { length: VISIBLE_SUGGESTIONS },
+    (_, index) => all[(start + index) % all.length]!,
+  );
+}
+
+/** Reduced-motion, read directly: the cycle is a JS timer, so CSS cannot stop it. */
+function usePrefersReducedMotion(): boolean {
+  // Lazy read: the group on screen is the same either way (offset 0), so the
+  // client's real preference cannot desync the server markup.
+  const [reduced, setReduced] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches),
+  );
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = (event: MediaQueryListEvent) => setReduced(event.matches);
+    query.addEventListener?.("change", onChange);
+    return () => query.removeEventListener?.("change", onChange);
+  }, []);
+  return reduced;
+}
+
+/** Handlers a chip row spreads so the cycle pauses while it is being read. */
+export type SuggestionCycleHandlers = {
+  onPointerEnter: PointerEventHandler;
+  onPointerLeave: PointerEventHandler;
+  onFocus: FocusEventHandler;
+  onBlur: FocusEventHandler;
+};
+
+export type SuggestionCycle = {
+  /** The group currently on screen. */
+  visible: readonly string[];
+  /** Index of the group's first chip — also the row's remount key. */
+  offset: number;
+  /** True while hovered or focused: the cycle is held, not stopped. */
+  paused: boolean;
+  handlers: SuggestionCycleHandlers;
+};
+
+/**
+ * Cap `all` to {@link VISIBLE_SUGGESTIONS} and advance through it every
+ * {@link SUGGESTION_CYCLE_MS}.
+ *
+ * `stopped` is the caller's "the user is no longer looking at a fresh empty
+ * state" signal (thread has messages, composer has text).
+ */
+export function useSuggestionCycle(
+  all: readonly string[],
+  { stopped = false }: { stopped?: boolean } = {},
+): SuggestionCycle {
+  const [offset, setOffset] = useState(0);
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const reduced = usePrefersReducedMotion();
+
+  const paused = hovered || focused;
+  const cycles = all.length > VISIBLE_SUGGESTIONS;
+  const active = cycles && !stopped && !paused && !reduced;
+
+  useEffect(() => {
+    if (!active) return;
+    const timer = setInterval(
+      () => setOffset((current) => current + VISIBLE_SUGGESTIONS),
+      SUGGESTION_CYCLE_MS,
+    );
+    return () => clearInterval(timer);
+  }, [active]);
+
+  const handlers = useMemo<SuggestionCycleHandlers>(
+    () => ({
+      onPointerEnter: () => setHovered(true),
+      onPointerLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+    }),
+    [],
+  );
+
+  const visible = useMemo(
+    () => suggestionWindow(all, offset),
+    [all, offset],
+  );
+
+  return { visible, offset, paused, handlers };
+}
+
+const SuggestionCycleContext = createContext<SuggestionCycle | null>(null);
+
+/** Mounts the cycle above the skins so every renderer shares one timer. */
+export function SuggestionCycleProvider({
+  value,
+  children,
+}: {
+  value: SuggestionCycle;
+  children: ReactNode;
+}) {
+  return (
+    <SuggestionCycleContext.Provider value={value}>
+      {children}
+    </SuggestionCycleContext.Provider>
+  );
+}
+
+/**
+ * What a skin's chip row needs: the remount key (so the group fades in) and
+ * the pause handlers. Surfaces mounted without the provider still render —
+ * they simply never cycle.
+ */
+export function useSuggestionGroup(): {
+  groupKey: number;
+  handlers: SuggestionCycleHandlers;
+} {
+  const cycle = useContext(SuggestionCycleContext);
+  return useMemo(
+    () => ({
+      groupKey: cycle?.offset ?? 0,
+      handlers: cycle?.handlers ?? NO_HANDLERS,
+    }),
+    [cycle],
+  );
+}
+
+const NO_HANDLERS: SuggestionCycleHandlers = {
+  onPointerEnter: () => {},
+  onPointerLeave: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+};
+
+/**
+ * Has the visitor left the fresh empty state? Reads the assistant-ui runtime
+ * directly so the shell that owns the starter list can stop the cycle without
+ * sitting inside the runtime provider. Defensive on purpose: a runtime double
+ * or an SSR pass without a live thread simply reports "not started".
+ */
+export function useThreadActivity(
+  runtime: { thread?: unknown } | null | undefined,
+): { started: boolean; typed: boolean } {
+  const thread = runtime?.thread as
+    | {
+        getState?: () => { messages?: readonly unknown[] } | undefined;
+        subscribe?: (callback: () => void) => (() => void) | void;
+        composer?: { getState?: () => { text?: string } | undefined };
+      }
+    | undefined;
+  const [started, setStarted] = useState(false);
+  const [typed, setTyped] = useState(false);
+
+  useEffect(() => {
+    if (typeof thread?.getState !== "function") return;
+    const read = () => {
+      let messages: readonly unknown[] | undefined;
+      let text: string | undefined;
+      try {
+        messages = thread.getState?.()?.messages;
+        text = thread.composer?.getState?.()?.text;
+      } catch {
+        return;
+      }
+      setStarted((messages?.length ?? 0) > 0);
+      setTyped((text?.trim().length ?? 0) > 0);
+    };
+    // Deferred out of the synchronous effect body —
+    // react-hooks/set-state-in-effect.
+    queueMicrotask(read);
+    const unsubscribe = thread.subscribe?.(read);
+    return () => {
+      if (typeof unsubscribe === "function") unsubscribe();
+    };
+  }, [thread]);
+
+  return useMemo(() => ({ started, typed }), [started, typed]);
+}

package/src/components/chat/suggestion-scroll-row.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+/**
+ * Horizontal row for example questions. Its scrollbar is thin and stays
+ * hidden until the row is hovered, focused or scrolled (styles in
+ * chat-aui.css, `.aui-suggestion-scroll`). Chrome does not repaint a
+ * `::-webkit-scrollbar-thumb` when only `:hover` changes, so the row sets
+ * `data-hover` / `data-focus` itself, and `data-scrolling` for a moment after
+ * each scroll so touch and trackpad users see where they are.
+ */
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  type FocusEvent,
+  type HTMLAttributes,
+  type PointerEvent,
+  type UIEvent,
+} from "react";
+
+import { cn } from "../../lib/utils";
+
+const REVEAL_MS = 900;
+
+export const SuggestionScrollRow = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SuggestionScrollRow(
+    { className, onScroll, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props },
+    ref,
+  ) {
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(
+      () => () => {
+        if (timer.current) clearTimeout(timer.current);
+      },
+      [],
+    );
+
+    const handleScroll = useCallback(
+      (event: UIEvent<HTMLDivElement>) => {
+        const el = event.currentTarget;
+        el.dataset.scrolling = "true";
+        if (timer.current) clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+          delete el.dataset.scrolling;
+        }, REVEAL_MS);
+        onScroll?.(event);
+      },
+      [onScroll],
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn("aui-suggestion-scroll overflow-x-auto", className)}
+        onScroll={handleScroll}
+        onPointerEnter={(event: PointerEvent<HTMLDivElement>) => {
+          if (event.pointerType === "mouse") event.currentTarget.dataset.hover = "true";
+          onPointerEnter?.(event);
+        }}
+        onPointerLeave={(event: PointerEvent<HTMLDivElement>) => {
+          delete event.currentTarget.dataset.hover;
+          onPointerLeave?.(event);
+        }}
+        onFocus={(event: FocusEvent<HTMLDivElement>) => {
+          event.currentTarget.dataset.focus = "true";
+          onFocus?.(event);
+        }}
+        onBlur={(event: FocusEvent<HTMLDivElement>) => {
+          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+            delete event.currentTarget.dataset.focus;
+          }
+          onBlur?.(event);
+        }}
+        {...props}
+      />
+    );
+  },
+);