expo-interface 0.1.0 → 0.2.0

package/src/tooltip/tooltip.css

@@ -0,0 +1,40 @@
+/* The trigger is an unstyled <button> so it can carry `interestfor`. */
+.ui-tooltip {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: default;
+}
+
+.ui-tooltip:focus-visible {
+  outline: 2px solid var(--color-tint);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Native hint popover, anchored above the trigger and flipping below. */
+.ui-tooltip__hint {
+  inset: auto;
+  margin: 0;
+  margin-block: 6px;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 8px;
+  background: var(--color-label);
+  color: var(--color-background);
+  font-family: var(--font-display);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  position-area: top;
+  position-try-fallbacks: flip-block;
+}

package/src/tooltip/types.ts

@@ -0,0 +1,25 @@
+import type {ReactNode} from 'react';
+
+/**
+ * Cross-platform tooltip: a short hint attached to a piece of content.
+ *
+ * - Web: a native `popover="hint"` shown by the Interest Invoker API
+ *   (`interestfor` — hover, keyboard focus or touch long-press), laid out with
+ *   CSS anchor positioning; browsers without it fall back to the `title`
+ *   attribute, the platform's built-in tooltip.
+ * - Android: the Jetpack Compose Material 3 `TooltipBox` / `PlainTooltip`
+ *   shown on long-press.
+ * - iOS: iOS has no tooltip idiom; `children` render as-is and `text` is
+ *   exposed to VoiceOver as an accessibility hint.
+ *
+ * `children` should be non-interactive content (an icon, a label): the web
+ * trigger is a `<button>`, and buttons can't nest.
+ */
+export interface TooltipProps {
+  /** Hint text. */
+  text: string;
+  /** Content the tooltip is attached to. Must be native (`@expo/ui`) content on Android. */
+  children: ReactNode;
+  /** Identifier used to locate the trigger in end-to-end tests. */
+  testID?: string;
+}

package/src/link.ts

@@ -1,36 +0,0 @@
-import {Platform, Share} from 'react-native';
-
-/**
- * Opens the native share sheet (iOS/Android) or the Web Share API.
- * Falls back silently if the user cancels or sharing is unavailable.
- */
-export async function shareUrl(url: string, message?: string) {
-  try {
-    if (Platform.OS === 'ios') {
-      await Share.share({url, message});
-    } else {
-      await Share.share({message: message ? `${message}\n${url}` : url});
-    }
-  } catch {
-    // Cancelled or unsupported — nothing to do.
-  }
-}
-
-/**
- * Copies text to the clipboard. Uses the Web Clipboard API on web; on native,
- * where no clipboard module is linked, falls back to the share sheet.
- * Resolves to `true` when copied to the clipboard.
- */
-export async function copyText(text: string): Promise<boolean> {
-  const clipboard = globalThis.navigator?.clipboard;
-  if (Platform.OS === 'web' && clipboard) {
-    try {
-      await clipboard.writeText(text);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-  await shareUrl(text);
-  return false;
-}

package/src/qr/index.tsx

@@ -1,26 +0,0 @@
-import {useMemo} from 'react';
-import {Image} from 'expo-image';
-import qrcode from 'qrcode-generator';
-
-export interface QRCodeProps {
-  /** Value encoded in the QR code. */
-  value: string;
-  /** Rendered width/height in points. */
-  size?: number;
-}
-
-export function QRCode({value, size = 200}: QRCodeProps) {
-  const uri = useMemo(() => {
-    const qr = qrcode(0, 'M');
-    qr.addData(value);
-    qr.make();
-    return qr.createDataURL(8, 2);
-  }, [value]);
-  return (
-    <Image
-      source={{uri}}
-      style={{width: size, height: size, borderRadius: 12}}
-      contentFit="contain"
-    />
-  );
-}