feat(react): add popover component (#653)

packages/react/src/utils/use-latest-ref.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import { useRef } from 'react';
+
+/**
+ * Keep a ref that always points to the latest value.
+ *
+ * Useful for capturing callbacks or derived values inside closures
+ * that are created once (e.g. factory callbacks) without stale reads.
+ */
+export function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+export namespace useLatestRef {
+  export type Result<Value> = Readonly<{ current: Value }>;
+}

packages/react/src/utils/use-safe-id.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { useId } from 'react';
+
+const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
+
+/**
+ * Generate a CSS-safe identifier from React's `useId()`.
+ *
+ * `useId()` returns values like `:r0:` which contain colons — invalid
+ * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).
+ * This hook strips non-alphanumeric/underscore/hyphen characters and
+ * optionally prepends a prefix.
+ */
+export function useSafeId(prefix?: string): string {
+  const raw = useId().replace(UNSAFE_CHARS, '');
+  return prefix ? `${prefix}${raw}` : raw;
+}