feat(ui): expand reusable component foundation

- add Base UI and shadcn primitives for overlays, forms, navigation, feedback, and data display - add optimized DOM ripple hooks with ref composition and integrate the behavior into interactive controls - add AnchoredSurface SVG geometry and arrow-aware popover, dropdown, and tooltip rendering - extend responsive breakpoint and style utilities, declare component dependencies, and remove the redundant package ESLint config
2026-07-29 21:22:31 +08:00
parent cf8a7631e2
commit 7b9270ef67
68 changed files with 9209 additions and 144 deletions
@@ -0,0 +1,119 @@
+"use client"
+
+import { mergeProps } from "@base-ui/react/merge-props"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import {
+  AnchoredSurface,
+  AnchoredSurfaceArrow,
+  type AnchoredSurfaceProps,
+  getAnchoredSurfaceSideOffset,
+} from "@workspace/ui/components/anchored-surface"
+import { cn } from "@workspace/ui/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} />
+}
+
+type TooltipContentProps = TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "arrowPadding" | "side" | "sideOffset"
+  > & {
+    /**
+     * Renders the tooltip with an AnchoredSurface and connects its tail to the
+     * trigger. Pass an object to configure the surface.
+     */
+    showArrow?: boolean | Omit<AnchoredSurfaceProps, "children" | "render">
+  }
+
+function TooltipContent({
+  align = "center",
+  alignOffset = 0,
+  arrowPadding,
+  children,
+  className,
+  side = "top",
+  sideOffset,
+  render,
+  showArrow = false,
+  ...props
+}: TooltipContentProps) {
+  const usesAnchoredSurface = Boolean(showArrow)
+  const anchoredSurfaceProps:
+    Omit<AnchoredSurfaceProps, "children" | "render"> | undefined =
+    usesAnchoredSurface
+      ? {
+          borderWidth: 0,
+          cornerRadius: "sm",
+          pathClassName: "fill-foreground",
+          tailSize: "sm",
+          ...(typeof showArrow === "object" ? showArrow : undefined),
+        }
+      : undefined
+  const resolvedSideOffset =
+    sideOffset ?? (usesAnchoredSurface ? getAnchoredSurfaceSideOffset : 4)
+  const resolvedArrowPadding =
+    arrowPadding ?? (usesAnchoredSurface ? 10 : undefined)
+  const resolvedRender: TooltipPrimitive.Popup.Props["render"] =
+    !usesAnchoredSurface ? (
+      render
+    ) : typeof render === "function" ? (
+      (popupProps, popupState) => (
+        <AnchoredSurface
+          {...mergeProps<"div">(popupProps, anchoredSurfaceProps)}
+          render={(surfaceProps) => render(surfaceProps, popupState)}
+        />
+      )
+    ) : (
+      <AnchoredSurface {...anchoredSurfaceProps} render={render} />
+    )
+
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        arrowPadding={resolvedArrowPadding}
+        side={side}
+        sideOffset={resolvedSideOffset}
+        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]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-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",
+            usesAnchoredSurface && "bg-transparent",
+            className
+          )}
+          render={resolvedRender}
+          {...props}
+        >
+          {usesAnchoredSurface && (
+            <TooltipPrimitive.Arrow render={<AnchoredSurfaceArrow />} />
+          )}
+          {children}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }