From 4fefd9819ff62eb0b4f38dc07f1feb1531fef6f5 Mon Sep 17 00:00:00 2001
From: vineyardbovines <spencerfpope@gmail.com>
Date: Tue, 21 Apr 2026 12:20:19 -0400
Subject: [PATCH] feat(lightbox): add CircleChromeButton primitive

---
 .../lightbox/chrome/CircleChromeButton.tsx    | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/features/lightbox/chrome/CircleChromeButton.tsx

diff --git a/src/features/lightbox/chrome/CircleChromeButton.tsx b/src/features/lightbox/chrome/CircleChromeButton.tsx
new file mode 100644
index 0000000000..6bdc7e14d5
--- /dev/null
+++ b/src/features/lightbox/chrome/CircleChromeButton.tsx
@@ -0,0 +1,49 @@
+import {type ComponentType} from 'react'
+import {Pressable, type PressableProps, StyleSheet} from 'react-native'
+
+import {HITSLOP_10} from '#/lib/constants'
+import {type Props as IconProps} from '#/components/icons/common'
+
+type Props = {
+  icon: ComponentType<IconProps>
+  label: string
+  onPress?: PressableProps['onPress']
+  testID?: string
+}
+
+const SIZE = 36
+const BG = 'rgba(0, 0, 0, 0.45)'
+
+export function CircleChromeButton({
+  icon: Icon,
+  label,
+  onPress,
+  testID,
+}: Props) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityHint=""
+      hitSlop={HITSLOP_10}
+      onPress={onPress}
+      testID={testID}
+      style={({pressed}) => [styles.root, pressed && styles.pressed]}>
+      <Icon width={20} fill="#fff" />
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    width: SIZE,
+    height: SIZE,
+    borderRadius: SIZE / 2,
+    backgroundColor: BG,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pressed: {
+    opacity: 0.85,
+  },
+})