@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-Q6CCHDI7.js

@@ -0,0 +1,331 @@
+import { LONG_PRESS_DELAY_MS, ContextMenuOverlay } from './chunk-7CGJBQUA.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Pressable, Text, Platform } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  loading: "Loading preview",
+  error: "Couldn\u2019t load the preview."
+};
+function useResolvedPlatform(explicit) {
+  const theme = useLoamTheme("hover-card");
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
+function HoverCard({
+  children,
+  content,
+  actions = [],
+  onPress,
+  loading = false,
+  error,
+  open: openProp,
+  onOpenChange,
+  platform,
+  size = "md",
+  side = "bottom",
+  dismissible = false,
+  closeLabel = "Close preview",
+  accessibilityLabel,
+  previewLabel,
+  style
+}) {
+  const os = useResolvedPlatform(platform);
+  const [openState, setOpenState] = React.useState(false);
+  const open = openProp ?? openState;
+  const [anchor, setAnchor] = React.useState(null);
+  const [bodyHeight, setBodyHeight] = React.useState(0);
+  const theme = useLoamTheme("hover-card");
+  const triggerRef = React.useRef(null);
+  const setOpen = React.useCallback(
+    (next) => {
+      if (openProp === void 0) setOpenState(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange]
+  );
+  const body = error ? /* @__PURE__ */ jsx(HoverCardError, { children: error === true ? void 0 : error }) : loading ? /* @__PURE__ */ jsx(HoverCardSkeleton, {}) : content;
+  const show = () => {
+    haptics.impact("heavy");
+    const node = triggerRef.current;
+    if (node && typeof node.measureInWindow === "function") {
+      node.measureInWindow((x, y, width, height) => setAnchor({ x, y, width, height }));
+    }
+    setOpen(true);
+  };
+  return /* @__PURE__ */ jsxs(View, { style, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        ref: triggerRef,
+        accessibilityRole: "link",
+        accessibilityLabel,
+        accessibilityActions: [{ name: "longpress", label: previewLabel ?? "Show preview" }],
+        onAccessibilityAction: (e) => {
+          if (e.nativeEvent.actionName === "longpress") show();
+        },
+        delayLongPress: LONG_PRESS_DELAY_MS,
+        onLongPress: show,
+        onPress,
+        children
+      }
+    ),
+    os === "ios" ? /* @__PURE__ */ jsx(
+      ContextMenuOverlay,
+      {
+        open,
+        onClose: () => setOpen(false),
+        anchor: anchor && side === "top" ? flipAnchorAbove(anchor, bodyHeight + actions.length * theme.tapMin, theme.space.s2) : anchor,
+        platform: "ios",
+        items: actions,
+        preview: /* @__PURE__ */ jsx(HoverCardScope, { platform: "ios", size, onHeight: setBodyHeight, onDismiss: dismissible ? () => setOpen(false) : void 0, closeLabel, children: body }),
+        previewLabel,
+        onPreviewPress: onPress
+      }
+    ) : /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open,
+        onOpenChange: setOpen,
+        footer: actions.length > 0 ? /* @__PURE__ */ jsx(AndroidActions, { actions, close: () => setOpen(false) }) : void 0,
+        children: /* @__PURE__ */ jsx(HoverCardScope, { platform: "android", size, onDismiss: dismissible ? () => setOpen(false) : void 0, closeLabel, children: body })
+      }
+    )
+  ] });
+}
+function AndroidActions({
+  actions,
+  close
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: styles.actions, children: actions.map((a, i) => /* @__PURE__ */ jsx(View, { style: styles.action, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "lg",
+      fullWidth: true,
+      variant: a.destructive ? "danger" : i === actions.length - 1 ? "primary" : "outline",
+      leadingIcon: a.icon,
+      onPress: () => {
+        close();
+        a.onSelect?.();
+      },
+      children: a.label
+    }
+  ) }, a.key)) });
+}
+function flipAnchorAbove(anchor, columnHeight, gap) {
+  return { ...anchor, y: anchor.y - columnHeight - anchor.height - gap * 2 };
+}
+var ScopeContext = React.createContext("ios");
+var SizeContext = React.createContext("md");
+function HoverCardScope({
+  platform,
+  size = "md",
+  onHeight,
+  onDismiss,
+  closeLabel,
+  children
+}) {
+  const { styles, theme } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: platform, children: /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      onLayout: onHeight ? (e) => onHeight(e.nativeEvent.layout.height) : void 0,
+      style: [
+        styles.scope,
+        size === "sm" && { gap: theme.space.s2 },
+        size === "lg" && { gap: theme.space.s4 }
+      ],
+      children: [
+        onDismiss ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: closeLabel,
+            hitSlop: theme.space.s2,
+            onPress: onDismiss,
+            style: styles.close,
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.color.text2 })
+          }
+        ) : null,
+        children
+      ]
+    }
+  ) }) });
+}
+function HoverCardHeader({ media, title, meta }) {
+  const { styles, theme } = useStyles(sheet);
+  const size = React.useContext(SizeContext);
+  const t = size === "sm" ? theme.type.subheadline : size === "lg" ? theme.type.headline : null;
+  return /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+    media,
+    /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [styles.title, t && { fontSize: t.fontSize, lineHeight: t.lineHeight }],
+          numberOfLines: 1,
+          accessibilityRole: "header",
+          children: title
+        }
+      ),
+      meta ? /* @__PURE__ */ jsx(Text, { style: styles.meta, numberOfLines: 1, children: meta }) : null
+    ] })
+  ] });
+}
+function HoverCardBody({ children }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(Text, { style: styles.body, children });
+}
+function HoverCardFact({
+  icon,
+  children
+}) {
+  const { styles, theme } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { style: styles.fact, children: [
+    icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 15, color: theme.color.text2 }) : null,
+    /* @__PURE__ */ jsx(Text, { style: styles.factText, children })
+  ] });
+}
+function HoverCardSkeleton({
+  labels: labelsProp
+} = {}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("hoverCard", DEFAULT_LABELS, labelsProp);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityLabel: labels.loading,
+      accessibilityState: { busy: true },
+      style: styles.scope,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circle", width: 36, height: 36 }),
+          /* @__PURE__ */ jsxs(View, { style: styles.skeletonLines, children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: 172, height: 10 }),
+            /* @__PURE__ */ jsx(Skeleton, { width: 116, height: 10 })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 260, height: 10 }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 200, height: 10 })
+      ]
+    }
+  );
+}
+function HoverCardError({
+  children,
+  labels: labelsProp
+}) {
+  const { styles, theme } = useStyles(sheet);
+  const labels = useLabels("hoverCard", DEFAULT_LABELS, labelsProp);
+  return /* @__PURE__ */ jsxs(View, { style: styles.fact, accessibilityRole: "alert", children: [
+    /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: 16, color: theme.color.text2 }),
+    /* @__PURE__ */ jsx(Text, { style: styles.meta, children: children ?? labels.error })
+  ] });
+}
+function HoverCardPreview({
+  content,
+  actions = [],
+  loading = false,
+  error,
+  platform,
+  presentation = "card",
+  size = "md",
+  labels,
+  previewLabel
+}) {
+  const os = useResolvedPlatform(platform);
+  const { styles } = useStyles(sheet);
+  const body = error ? /* @__PURE__ */ jsx(HoverCardError, { labels, children: error === true ? void 0 : error }) : loading ? /* @__PURE__ */ jsx(HoverCardSkeleton, { labels }) : content;
+  if (presentation === "sheet") {
+    return /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open: true,
+        presentation: "inline",
+        onOpenChange: () => {
+        },
+        footer: actions.length > 0 ? /* @__PURE__ */ jsx(AndroidActions, { actions, close: () => {
+        } }) : void 0,
+        children: /* @__PURE__ */ jsx(HoverCardScope, { platform: os, size, children: body })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(View, { accessibilityLabel: previewLabel, style: styles.previewCard, children: [
+    /* @__PURE__ */ jsx(HoverCardScope, { platform: os, size, children: body }),
+    actions.length > 0 && !loading && !error ? /* @__PURE__ */ jsx(View, { style: styles.previewActions, children: actions.map((a, i) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: a.destructive ? "danger" : i === actions.length - 1 ? "ghost" : "outline",
+        leadingIcon: a.icon,
+        onPress: a.onSelect,
+        children: a.label
+      },
+      a.key
+    )) }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // The platter's look, drawn inline for HoverCardPreview.
+  previewCard: {
+    alignSelf: "flex-start",
+    maxWidth: theme.panel.xl,
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    padding: theme.space.s4,
+    gap: theme.space.s3,
+    ...theme.shadow.lg
+  },
+  previewActions: { flexDirection: "row", gap: theme.space.s2 },
+  scope: { gap: theme.space.s3 },
+  close: { alignSelf: "flex-end" },
+  header: { flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  headerText: { flexShrink: 1, gap: theme.space[3] },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.callout.fontSize,
+    lineHeight: theme.type.callout.lineHeight,
+    color: theme.color.text
+  },
+  meta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  body: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2
+  },
+  fact: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  factText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text2
+  },
+  skeletonLines: { flex: 1, gap: theme.space.s2 },
+  actions: {
+    flexDirection: "row",
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space.s4,
+    paddingBottom: theme.space.s4
+  },
+  action: { flex: 1 }
+}));
+
+export { HoverCard, HoverCardBody, HoverCardError, HoverCardFact, HoverCardHeader, HoverCardPreview, HoverCardSkeleton };