@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/module/media-card/ShareCard.js

@@ -0,0 +1,131 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { ExplicitBadge } from "../media-controls/index.js";
+import { RiMusic2Fill } from "../icons/remix/RiMusic2Fill.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { Artwork, CoverGradient } from "./parts.js";
+import { RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint } from "./shared.js";
+import { webDataSet } from "../styles/web-data.js";
+
+/**
+ * A track laid out to be shared as an image.
+ *
+ *   radius 20, padding 24, the gradient generated from `artworkColor` (stepped
+ *   dark enough for light text; neutral without it)
+ *   the cover (full width, square, radius 12); the title (title-2-bold) with
+ *   the explicit badge; the artist (headline-medium, muted); an optional lyrics
+ *   excerpt in a block of the gradient's darker stop (radius 12, padding 16,
+ *   title-3-bold lines); then `footer`
+ *
+ * Default width 320; `style` sets another. Static — nothing in it presses.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ShareCardComponent({
+  title,
+  artist,
+  lyrics,
+  footer,
+  explicit = false,
+  artwork,
+  artworkVariant,
+  artworkColor,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const tint = useMemo(() => resolveCoverTint(theme, artworkColor), [theme, artworkColor]);
+  const [coverWidth, setCoverWidth] = React.useState(0);
+  return /*#__PURE__*/_jsxs(View, {
+    ...webDataSet({
+      bloomMediaCard: 'share'
+    }),
+    style: [{
+      width: 320,
+      borderRadius: RECAP_RADIUS,
+      overflow: 'hidden',
+      backgroundColor: tint.top
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(CoverGradient, {
+      top: tint.top,
+      bottom: tint.bottom
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 24,
+        paddingBottom: 24,
+        gap: 16
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: '100%',
+          aspectRatio: 1
+        },
+        onLayout: event => setCoverWidth(event.nativeEvent.layout.width),
+        children: coverWidth > 0 ? /*#__PURE__*/_jsx(Artwork, {
+          source: artwork,
+          variant: artworkVariant,
+          width: coverWidth,
+          height: coverWidth,
+          radius: 12,
+          icon: RiMusic2Fill,
+          paint: paint,
+          testID: testID ? `${testID}-artwork` : undefined
+        }) : null
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          gap: 2
+        },
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8
+          },
+          children: [/*#__PURE__*/_jsx(Text, {
+            variant: "title-2-bold",
+            numberOfLines: 2,
+            style: {
+              flexShrink: 1,
+              color: tint.text
+            },
+            children: title
+          }), explicit ? /*#__PURE__*/_jsx(ExplicitBadge, {}) : null]
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "headline-medium",
+          numberOfLines: 1,
+          style: {
+            color: tint.textMuted
+          },
+          children: artist
+        })]
+      }), lyrics && lyrics.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: {
+          borderRadius: 12,
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 16,
+          paddingBottom: 16,
+          backgroundColor: tint.bottom,
+          gap: 4
+        },
+        testID: testID ? `${testID}-lyrics` : undefined,
+        children: lyrics.map((line, index) => /*#__PURE__*/_jsx(Text, {
+          variant: "title-3-bold",
+          style: {
+            color: tint.text
+          },
+          children: line
+        }, `${index}-${line}`))
+      }) : null, footer]
+    })]
+  });
+}
+export const ShareCard = /*#__PURE__*/memo(ShareCardComponent);
+ShareCard.displayName = 'ShareCard';
+//# sourceMappingURL=ShareCard.js.map

package/lib/module/media-card/ShareCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","ExplicitBadge","RiMusic2Fill","useTheme","Text","Artwork","CoverGradient","RECAP_RADIUS","resolveCoverTint","resolveMediaCardPaint","webDataSet","jsx","_jsx","jsxs","_jsxs","ShareCardComponent","title","artist","lyrics","footer","explicit","artwork","artworkVariant","artworkColor","style","testID","theme","paint","tint","coverWidth","setCoverWidth","useState","bloomMediaCard","width","borderRadius","overflow","backgroundColor","top","children","bottom","paddingLeft","paddingRight","paddingTop","paddingBottom","gap","aspectRatio","onLayout","event","nativeEvent","layout","source","variant","height","radius","icon","undefined","flexDirection","alignItems","numberOfLines","flexShrink","color","text","textMuted","length","map","line","index","ShareCard","displayName"],"sourceRoot":"../../../src","sources":["media-card/ShareCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/media-card/SongCard.js

@@ -0,0 +1,128 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { ExplicitBadge, LikeButton, NowPlayingIndicator } from "../media-controls/index.js";
+import { RiMusic2Fill } from "../icons/remix/RiMusic2Fill.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { MediaCard, SUBTITLE_VARIANT } from "./MediaCard.js";
+import { IS_WEB, resolveMediaCardPaint } from "./shared.js";
+import { webDataSet } from "../styles/web-data.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function normaliseArtists(artists) {
+  return (artists ?? []).map(artist => typeof artist === 'string' ? {
+    name: artist
+  } : artist);
+}
+
+/**
+ * A track.
+ *
+ *   tile   square cover; the title with the `ExplicitBadge` after it; the
+ *          artists line
+ *   row    + the album line, then `LikeButton` and the duration before
+ *          "More options"
+ *
+ * `current` draws `NowPlayingIndicator` before the title (moving while
+ * `playing`) and paints the title in the accent. With `onPressArtist` each
+ * artist is its own link, drawn over the card's link rather than inside it.
+ *
+ * Name: "Night Drive, Explicit, Song, Mara Vell, Juno Park".
+ */
+function SongCardComponent({
+  title,
+  artists,
+  onPressArtist,
+  album,
+  explicit = false,
+  duration,
+  liked = false,
+  onLikedChange,
+  typeLabel = 'Song',
+  current = false,
+  playing = false,
+  layout = 'tile',
+  size = 'medium',
+  testID,
+  ...rest
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
+  const list = normaliseArtists(artists);
+  const names = list.map(artist => artist.name).join(', ');
+  const row = layout === 'row';
+  const variant = row ? 'body-2-regular' : SUBTITLE_VARIANT[size];
+  const subtitle = list.length === 0 ? undefined : onPressArtist ? /*#__PURE__*/_jsx(Text, {
+    variant: variant,
+    numberOfLines: 1,
+    style: {
+      color: paint.textSecondary
+    },
+    children: list.map((artist, index) => /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [index > 0 ? ', ' : null, /*#__PURE__*/_jsx(Text, {
+        ...webDataSet({
+          bloomMediaCardArtist: ''
+        }),
+        role: "link",
+        accessibilityLabel: artist.name,
+        variant: variant,
+        onPress: () => onPressArtist(artist, index),
+        style: {
+          color: paint.textSecondary
+        },
+        testID: testID ? `${testID}-artist-${index}` : undefined,
+        children: artist.name
+      })]
+    }, `${index}-${artist.name}`))
+  }) : names;
+  const trailing = row ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [onLikedChange ? /*#__PURE__*/_jsx(View, {
+      ...webDataSet(liked ? {} : {
+        bloomMediaCardReveal: IS_WEB ? 'hover' : ''
+      }),
+      children: /*#__PURE__*/_jsx(LikeButton, {
+        liked: liked,
+        onLikedChange: onLikedChange,
+        size: "small",
+        accessibilityLabel: `Save ${title} to Your Library`
+      })
+    }) : null, duration ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-regular",
+      style: {
+        color: paint.textSecondary,
+        minWidth: 36,
+        textAlign: 'right',
+        fontVariant: ['tabular-nums']
+      },
+      children: duration
+    }) : null]
+  }) : undefined;
+  return /*#__PURE__*/_jsx(MediaCard, {
+    ...rest,
+    title: title,
+    typeLabel: typeLabel,
+    subtitle: subtitle,
+    interactiveSubtitle: Boolean(onPressArtist),
+    meta: row && album ? [album] : undefined,
+    placeholderIcon: RiMusic2Fill,
+    titleLeading: current ? /*#__PURE__*/_jsx(NowPlayingIndicator, {
+      playing: playing,
+      size: 14
+    }) : undefined,
+    titleAccessory: explicit ? /*#__PURE__*/_jsx(ExplicitBadge, {
+      size: "small"
+    }) : undefined,
+    titleAccessoryLabel: explicit ? 'Explicit' : undefined,
+    accessibilityDetail: onPressArtist ? names : undefined,
+    trailing: trailing,
+    current: current,
+    playing: playing,
+    layout: layout,
+    size: size,
+    testID: testID
+  });
+}
+export const SongCard = /*#__PURE__*/memo(SongCardComponent);
+SongCard.displayName = 'SongCard';
+//# sourceMappingURL=SongCard.js.map

package/lib/module/media-card/SongCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","ExplicitBadge","LikeButton","NowPlayingIndicator","RiMusic2Fill","useTheme","Text","MediaCard","SUBTITLE_VARIANT","IS_WEB","resolveMediaCardPaint","webDataSet","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","normaliseArtists","artists","map","artist","name","SongCardComponent","title","onPressArtist","album","explicit","duration","liked","onLikedChange","typeLabel","current","playing","layout","size","testID","rest","theme","paint","list","names","join","row","variant","subtitle","length","undefined","numberOfLines","style","color","textSecondary","children","index","bloomMediaCardArtist","role","accessibilityLabel","onPress","trailing","bloomMediaCardReveal","minWidth","textAlign","fontVariant","interactiveSubtitle","Boolean","meta","placeholderIcon","titleLeading","titleAccessory","titleAccessoryLabel","accessibilityDetail","SongCard","displayName"],"sourceRoot":"../../../src","sources":["media-card/SongCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/media-card/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+export { MediaCard } from "./MediaCard.js";
+export { SongCard } from "./SongCard.js";
+export { AlbumCard } from "./AlbumCard.js";
+export { ArtistCard } from "./ArtistCard.js";
+export { PlaylistCard } from "./PlaylistCard.js";
+export { MixCard } from "./MixCard.js";
+export { PodcastCard } from "./PodcastCard.js";
+export { EpisodeCard } from "./EpisodeCard.js";
+export { AudiobookCard } from "./AudiobookCard.js";
+export { GenreCard } from "./GenreCard.js";
+export { EventCard } from "./EventCard.js";
+export { ProfileCard } from "./ProfileCard.js";
+export { FriendActivityCard } from "./FriendActivityCard.js";
+export { QuickAccessTile } from "./QuickAccessTile.js";
+export { RecapCard } from "./RecapCard.js";
+export { ShareCard } from "./ShareCard.js";
+//# sourceMappingURL=index.js.map

package/lib/module/media-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MediaCard","SongCard","AlbumCard","ArtistCard","PlaylistCard","MixCard","PodcastCard","EpisodeCard","AudiobookCard","GenreCard","EventCard","ProfileCard","FriendActivityCard","QuickAccessTile","RecapCard","ShareCard"],"sourceRoot":"../../../src","sources":["media-card/index.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,gBAAa;AACvC,SAASC,QAAQ,QAAQ,eAAY;AACrC,SAASC,SAAS,QAAQ,gBAAa;AACvC,SAASC,UAAU,QAAQ,iBAAc;AACzC,SAASC,YAAY,QAAQ,mBAAgB;AAC7C,SAASC,OAAO,QAAQ,cAAW;AACnC,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,aAAa,QAAQ,oBAAiB;AAC/C,SAASC,SAAS,QAAQ,gBAAa;AACvC,SAASC,SAAS,QAAQ,gBAAa;AACvC,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,kBAAkB,QAAQ,yBAAsB;AACzD,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SAASC,SAAS,QAAQ,gBAAa;AACvC,SAASC,SAAS,QAAQ,gBAAa","ignoreList":[]}

package/lib/module/media-card/parts.js

@@ -0,0 +1,357 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Image, Linking, Pressable, StyleSheet, View } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { GlyphButton } from '../button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../dropdown-menu';
+import { RiMoreFill } from "../icons/remix/RiMoreFill.js";
+import { useImageResolver } from "../image-resolver/context.js";
+import { Meter } from "../stat-bar/index.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { borderRadius } from "../styles/tokens.js";
+import { webDataSet } from "../styles/web-data.js";
+import { clamp01 } from "../styles/clamp.js";
+import { useTheme } from "../theme/use-theme.js";
+import { IS_WEB, MEDIA_CARD_CSS, MEDIA_CARD_STYLE_ID, resolveArtworkUri, resolveCoverTint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function useMediaCardCss() {
+  React.useEffect(() => {
+    adoptStyleSheet(MEDIA_CARD_STYLE_ID, MEDIA_CARD_CSS);
+  }, []);
+}
+
+// ---------------------------------------------------------------------------
+//  Covers
+// ---------------------------------------------------------------------------
+
+let gradientId = 0;
+
+/**
+ * A diagonal two-stop gradient filling its parent. Both stops are OPAQUE:
+ * react-native-svg discards the alpha inside `stopColor`.
+ */
+export function CoverGradient({
+  top,
+  bottom
+}) {
+  const id = useMemo(() => `bloom-media-card-cover-${gradientId++}`, []);
+  return /*#__PURE__*/_jsxs(Svg, {
+    width: "100%",
+    height: "100%",
+    style: StyleSheet.absoluteFill,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: /*#__PURE__*/_jsxs(LinearGradient, {
+        id: id,
+        x1: "0",
+        y1: "0",
+        x2: "1",
+        y2: "1",
+        children: [/*#__PURE__*/_jsx(Stop, {
+          offset: "0",
+          stopColor: top,
+          stopOpacity: 1
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "1",
+          stopColor: bottom,
+          stopOpacity: 1
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Rect, {
+      x: "0",
+      y: "0",
+      width: "100%",
+      height: "100%",
+      fill: `url(#${id})`
+    })]
+  });
+}
+/**
+ * One cover: the image, or — without one — a gradient from `color` (neutral
+ * placeholder without a colour) with a centred glyph. Decorative: the card's
+ * name already says what it is.
+ */
+export function Artwork({
+  source,
+  variant,
+  width,
+  height,
+  round = false,
+  radius,
+  color,
+  icon: Icon,
+  children,
+  paint,
+  testID
+}) {
+  const theme = useTheme();
+  const resolver = useImageResolver();
+  const uri = resolveArtworkUri(source, resolver, variant);
+  const tint = useMemo(() => color ? resolveCoverTint(theme, color) : null, [theme, color]);
+  const glyph = Math.round(Math.min(48, Math.max(16, Math.min(width, height) * 0.36)));
+  let content;
+  if (children) content = children;else if (uri) content = /*#__PURE__*/_jsx(Image, {
+    source: {
+      uri
+    },
+    resizeMode: "cover",
+    accessibilityIgnoresInvertColors: true,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });else content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [tint ? /*#__PURE__*/_jsx(CoverGradient, {
+      top: tint.top,
+      bottom: tint.bottom
+    }) : null, Icon ?
+    /*#__PURE__*/
+    // Positioned, so it paints above the absolutely-positioned gradient on web.
+    _jsx(View, {
+      style: {
+        position: 'relative'
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        width: glyph,
+        height: glyph,
+        fill: tint ? tint.textMuted : paint.placeholderGlyph
+      })
+    }) : null]
+  });
+  return /*#__PURE__*/_jsx(View, {
+    "aria-hidden": true,
+    importantForAccessibility: "no-hide-descendants",
+    accessibilityElementsHidden: true,
+    style: {
+      width,
+      height,
+      flexShrink: 0,
+      borderRadius: round ? borderRadius.full : radius,
+      overflow: 'hidden',
+      backgroundColor: paint.placeholder,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    testID: testID,
+    children: content
+  });
+}
+
+/**
+ * Up to four covers in a 2×2 grid, reading order. Fewer than four: the empty
+ * cells are the placeholder colour; one cover fills the whole box.
+ */
+export function Mosaic({
+  sources,
+  width,
+  height,
+  paint,
+  testID
+}) {
+  const resolver = useImageResolver();
+  const covers = sources.slice(0, 4);
+  if (covers.length === 1) {
+    const uri = resolveArtworkUri(covers[0], resolver);
+    return uri ? /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri
+      },
+      resizeMode: "cover",
+      style: {
+        width,
+        height
+      },
+      testID: testID
+    }) : null;
+  }
+  const cellW = width / 2;
+  const cellH = height / 2;
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width,
+      height,
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    },
+    testID: testID,
+    children: [0, 1, 2, 3].map(index => {
+      const uri = resolveArtworkUri(covers[index], resolver);
+      return uri ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri
+        },
+        resizeMode: "cover",
+        style: {
+          width: cellW,
+          height: cellH
+        },
+        testID: testID ? `${testID}-${index}` : undefined
+      }, index) : /*#__PURE__*/_jsx(View, {
+        style: {
+          width: cellW,
+          height: cellH,
+          backgroundColor: paint.placeholder
+        },
+        testID: testID ? `${testID}-${index}` : undefined
+      }, index);
+    })
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  Listening progress
+// ---------------------------------------------------------------------------
+
+/**
+ * How much of an episode or book has been heard: a 4px pill `Meter`, accent
+ * fill. A `progressbar` named by `label`, valued 0..100.
+ */
+export function ListenProgress({
+  value,
+  paint,
+  label = 'Listened',
+  width,
+  style,
+  testID
+}) {
+  const pct = Math.round(clamp01(value) * 100);
+  return /*#__PURE__*/_jsx(Meter, {
+    value: pct,
+    max: 100,
+    height: 4,
+    radius: borderRadius.full,
+    width: width,
+    fill: paint.fill,
+    track: paint.rail,
+    accessibilityLabel: label,
+    valueText: `${pct}%`,
+    style: [{
+      flexGrow: width === undefined ? 1 : 0,
+      flexShrink: 1,
+      minWidth: 24
+    }, style],
+    testID: testID
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  The link that covers the card
+// ---------------------------------------------------------------------------
+
+/**
+ * THE CARD'S LINK IS A SIBLING LAID UNDER ITS CONTENT, NOT A WRAPPER AROUND
+ * IT. It fills the card absolutely and carries the whole name; the artwork and
+ * text are drawn over it with `pointerEvents="none"`, so a press on them falls
+ * through to the link, while the play button, the menu trigger, a like button
+ * or an artist link are drawn over it as their OWN targets. A button inside an
+ * anchor is invalid HTML and would make every inner press open the card.
+ */
+export function CardLink({
+  name,
+  onPress,
+  href,
+  onLongPress,
+  selected = false,
+  radius,
+  paint,
+  testID
+}) {
+  const handlePress = event => {
+    if (onPress) {
+      if (IS_WEB && href) event.preventDefault();
+      onPress();
+      return;
+    }
+    if (!IS_WEB && href) void Linking.openURL(href).catch(() => undefined);
+  };
+  const style = {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: radius,
+    '--bloom-media-card-ring': paint.ring
+  };
+  const interactive = Boolean(onPress || href);
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...webDataSet({
+      bloomMediaCardLink: ''
+    }),
+    ...(IS_WEB && href ? {
+      href
+    } : null),
+    ...(IS_WEB && selected ? {
+      'aria-current': 'true'
+    } : null),
+    role: href ? 'link' : interactive ? 'button' : undefined,
+    accessibilityLabel: name,
+    accessibilityState: {
+      selected
+    },
+    onPress: onPress || !IS_WEB && href ? handlePress : undefined,
+    onLongPress: onLongPress,
+    style: style,
+    testID: testID ? `${testID}-link` : undefined
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  "More options"
+// ---------------------------------------------------------------------------
+
+export function hasMenu(menu, items) {
+  return menu != null || items != null && items.length > 0;
+}
+
+/**
+ * The "More options" trigger and its menu (a dropdown on web, a sheet on
+ * native). Controlled by the card so a right-click or a long press on the card
+ * opens the same menu.
+ */
+export function CardMenu({
+  items,
+  menu,
+  label = 'More options',
+  subject,
+  open,
+  onOpenChange,
+  reveal,
+  testID
+}) {
+  const name = `${label} for ${subject}`;
+  return /*#__PURE__*/_jsx(View, {
+    ...webDataSet({
+      bloomMediaCardMenu: '',
+      ...(reveal ? {
+        bloomMediaCardReveal: 'hover'
+      } : null)
+    }),
+    style: {
+      flexShrink: 0
+    },
+    children: /*#__PURE__*/_jsxs(DropdownMenu, {
+      open: open,
+      onOpenChange: onOpenChange,
+      children: [/*#__PURE__*/_jsx(DropdownMenuTrigger, {
+        asChild: true,
+        label: name,
+        children: /*#__PURE__*/_jsx(GlyphButton, {
+          size: 32,
+          icon: RiMoreFill,
+          glyphSize: 20,
+          accessibilityLabel: name,
+          testID: testID ? `${testID}-menu` : undefined
+        })
+      }), /*#__PURE__*/_jsx(DropdownMenuContent, {
+        label: label,
+        align: "end",
+        children: menu ?? items?.map((item, index) => /*#__PURE__*/_jsx(DropdownMenuItem, {
+          onPress: item.onPress,
+          disabled: item.disabled,
+          leading: item.icon,
+          variant: item.destructive ? 'destructive' : 'default',
+          children: item.label
+        }, `${index}-${item.label}`))
+      })]
+    })
+  });
+}
+//# sourceMappingURL=parts.js.map