react-native-ensys-camera-x 1.0.7

package/src/library/libraryIcons.tsx

@@ -0,0 +1,928 @@
+/**
+ * Hand-authored vector icons built ONLY from React Native primitives (View + borders +
+ * transforms). No third-party icon library, no react-native-svg, and no external SVG/PNG
+ * assets — every shape is composed from scratch so the set stays dependency-free and matches
+ * the app's clean, modern outline style.
+ *
+ * Every icon shares one contract — { size, color, strokeWidth } — so stroke width, sizing,
+ * padding and alignment stay identical across the whole set. Sizes are unitless (dp), so the
+ * caller scales them for different screen densities.
+ */
+import type { FC } from 'react';
+import { View, Text, Animated, StyleSheet, type ColorValue } from 'react-native';
+import { libraryPalette as palette } from './palette';
+
+export interface IconProps {
+  /** Overall square canvas size in dp. */
+  size?: number;
+  /** Stroke / fill color. */
+  color?: ColorValue;
+  /** Stroke thickness in dp — kept consistent across every icon. */
+  strokeWidth?: number;
+  style?: any;
+  progress?: any;
+  direction?: 'back' | 'forward';
+  label?: string;
+  [key: string]: any;
+}
+
+const DEFAULT_SIZE = 22;
+const DEFAULT_COLOR = palette.white;
+const DEFAULT_STROKE = 2;
+
+/**
+ * A single Plus icon that morphs into a Cross (✕) as [progress] animates 0 → 1.
+ * When progress is omitted or 0, renders a clean Plus (+).
+ *
+ * The glyph is two crossed strokes — a "+" — that keep their full length the whole time. As
+ * progress runs, the whole glyph spins 225° (a half-turn flourish, preserving the original
+ * animated feel) so both strokes settle at 45°, forming a crisp, perfectly symmetric "✕" at
+ * progress 1 and a clean "+" at progress 0. The cross is drawn entirely from RN primitives
+ * (two rounded bars) — no icon library, no react-native-svg, no external SVG asset. Driven
+ * solely by the parent's Animated.Value, so there is exactly one source of truth for the
+ * transition in BOTH directions (open ⇄ close) with no internal state to desync.
+ */
+export const PlusCloseIcon: FC<IconProps> = ({
+  size = 24,
+  color = DEFAULT_COLOR,
+  strokeWidth = 2.4,
+  progress,
+  style,
+}) => {
+  const barLength = Math.round(size * 0.58);
+  // 0° → 225° = 180° flourish + the 45° needed to turn a "+" into an "✕".
+  let spin: any = '0deg';
+  if (progress && typeof (progress as any).interpolate === 'function') {
+    spin = (progress as Animated.Value).interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '225deg'],
+    });
+  } else if (typeof progress === 'number') {
+    spin = `${progress * 225}deg`;
+  }
+
+  const horizontal = {
+    position: 'absolute' as const,
+    width: barLength,
+    height: strokeWidth,
+    borderRadius: strokeWidth,
+    backgroundColor: color,
+  };
+  const vertical = {
+    position: 'absolute' as const,
+    width: strokeWidth,
+    height: barLength,
+    borderRadius: strokeWidth,
+    backgroundColor: color,
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.center,
+        { width: size, height: size, transform: [{ rotate: spin }] },
+        style,
+      ]}
+    >
+      {/* Both strokes stay crossed throughout — the container's rotation alone
+          carries the "+" to a clean "✕". */}
+      <View style={horizontal} />
+      <View style={vertical} />
+    </Animated.View>
+  );
+};
+
+/** Outline camera: rounded body + viewfinder bump + centered lens ring. */
+export const CameraIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+}) => {
+  const bodyW = size;
+  const bodyH = Math.round(size * 0.66);
+  const lens = Math.round(size * 0.34);
+  const bumpW = Math.round(size * 0.3);
+  const bumpH = Math.round(size * 0.16);
+
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      {/* Viewfinder bump — sits on the body's top edge, slightly right of centre. */}
+      <View
+        style={{
+          position: 'absolute',
+          top: Math.round((size - bodyH) / 2) - bumpH + strokeWidth,
+          left: Math.round(size / 2 - bumpW / 2 + size * 0.12),
+          width: bumpW,
+          height: bumpH + strokeWidth,
+          borderTopLeftRadius: Math.round(size * 0.06),
+          borderTopRightRadius: Math.round(size * 0.06),
+          borderWidth: strokeWidth,
+          borderBottomWidth: 0,
+          borderColor: color,
+        }}
+      />
+      {/* Camera body */}
+      <View
+        style={{
+          width: bodyW,
+          height: bodyH,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: Math.round(size * 0.18),
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {/* Lens */}
+        <View
+          style={{
+            width: lens,
+            height: lens,
+            borderRadius: Math.round(lens / 2),
+            borderWidth: strokeWidth,
+            borderColor: color,
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+/** Outline document: rounded page, folded top-right corner, two text lines. */
+export const DocumentIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+}) => {
+  const w = Math.round(size * 0.72);
+  const h = Math.round(size * 0.9);
+  const fold = Math.round(size * 0.28);
+  const lineW = Math.round(w * 0.54);
+
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      <View style={{ width: w, height: h }}>
+        {/* Page */}
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: w,
+            height: h,
+            borderWidth: strokeWidth,
+            borderColor: color,
+            borderRadius: Math.round(size * 0.09),
+          }}
+        />
+        {/* Folded corner — one diagonal stroke across the top-right corner. */}
+        <View
+          style={{
+            position: 'absolute',
+            top: -strokeWidth / 2,
+            left: w - fold,
+            width: fold,
+            height: fold,
+          }}
+        >
+          <View
+            style={{
+              position: 'absolute',
+              top: Math.round(fold / 2 - strokeWidth / 2),
+              left: Math.round(fold / 2 - (fold * 1.414) / 2),
+              width: Math.round(fold * 1.414),
+              height: strokeWidth,
+              borderRadius: strokeWidth,
+              backgroundColor: color,
+              transform: [{ rotate: '-45deg' }],
+            }}
+          />
+        </View>
+        {/* Text lines */}
+        <View
+          style={{
+            position: 'absolute',
+            left: Math.round(w * 0.23),
+            top: Math.round(h * 0.52),
+            width: lineW,
+            height: strokeWidth,
+            borderRadius: strokeWidth,
+            backgroundColor: color,
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            left: Math.round(w * 0.23),
+            top: Math.round(h * 0.7),
+            width: lineW,
+            height: strokeWidth,
+            borderRadius: strokeWidth,
+            backgroundColor: color,
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+/** Browse Audio icon — a folder outline with a music note inside, representing browsing/selecting
+ *  audio files. Minimal outline style with rounded edges, matching the Android material design
+ *  aesthetic used throughout this icon set. */
+export const BrowseAudioIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+}) => {
+  // ── Folder dimensions ────────────────────────────────────────
+  const folderW = Math.round(size * 0.84);
+  const folderH = Math.round(size * 0.74);
+  const folderX = Math.round((size - folderW) / 2);
+  const folderY = Math.round(size * 0.16);
+  // Folder tab — the little flap on top-left, flush with folder top
+  const tabW = Math.round(size * 0.28);
+  const tabH = Math.round(size * 0.12);
+  const tabX = folderX;
+  const tabY = folderY;
+
+  // ── Music note dimensions (inside the folder) ─────────────────
+  const noteHeadSize = Math.round(size * 0.26);
+  const noteStemH = Math.round(size * 0.34);
+  const noteStemX = Math.round(size * 0.56);
+  const noteHeadY = Math.round(size * 0.4);
+
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      {/* Folder tab — sits flush on the folder body top edge */}
+      <View
+        style={{
+          position: 'absolute',
+          left: tabX,
+          top: tabY,
+          width: tabW,
+          height: tabH + strokeWidth,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderBottomWidth: 0,
+          borderTopLeftRadius: Math.round(size * 0.06),
+          borderTopRightRadius: Math.round(size * 0.06),
+          backgroundColor: 'transparent',
+        }}
+      />
+      {/* Folder body — rounded rectangle */}
+      <View
+        style={{
+          position: 'absolute',
+          left: folderX,
+          top: folderY,
+          width: folderW,
+          height: folderH,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: Math.round(size * 0.1),
+          backgroundColor: 'transparent',
+        }}
+      >
+        {/* Music note head — small tilted ellipse */}
+        <View
+          style={{
+            position: 'absolute',
+            left: noteStemX - Math.round(noteHeadSize * 0.55),
+            top: noteHeadY,
+            width: noteHeadSize,
+            height: Math.round(noteHeadSize * 0.72),
+            borderRadius: Math.round(noteHeadSize / 2),
+            borderWidth: strokeWidth,
+            borderColor: color,
+            transform: [{ rotate: '-20deg' }],
+          }}
+        />
+        {/* Music note stem */}
+        <View
+          style={{
+            position: 'absolute',
+            left: noteStemX,
+            top: noteHeadY - Math.round(noteStemH * 0.15),
+            width: strokeWidth,
+            height: noteStemH,
+            borderRadius: strokeWidth,
+            backgroundColor: color,
+          }}
+        />
+        {/* Music note flag — curved stroke from the stem top */}
+        <View
+          style={{
+            position: 'absolute',
+            left: noteStemX,
+            top: noteHeadY - Math.round(noteStemH * 0.15) + Math.round(strokeWidth * 0.3),
+            width: Math.round(size * 0.16),
+            height: Math.round(size * 0.18),
+            borderWidth: strokeWidth,
+            borderColor: color,
+            borderLeftWidth: 0,
+            borderBottomWidth: 0,
+            borderRadius: Math.round(size * 0.04),
+            borderTopRightRadius: Math.round(size * 0.06),
+            backgroundColor: 'transparent',
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+/** Outline microphone: capsule head, U-shaped cradle, stem + base. */
+export const AudioIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+}) => {
+  const headW = Math.round(size * 0.36);
+  const headH = Math.round(size * 0.5);
+  const cradleW = Math.round(size * 0.58);
+  const cradleH = Math.round(size * 0.3);
+  const stemH = Math.round(size * 0.12);
+  const baseW = Math.round(size * 0.34);
+
+  return (
+    <View
+      style={[
+        styles.center,
+        { width: size, height: size, paddingTop: Math.round(size * 0.06) },
+      ]}
+    >
+      {/* Mic head */}
+      <View
+        style={{
+          width: headW,
+          height: headH,
+          borderRadius: Math.round(headW / 2),
+          borderWidth: strokeWidth,
+          borderColor: color,
+        }}
+      />
+      {/* Cradle (open-top U) */}
+      <View
+        style={{
+          width: cradleW,
+          height: cradleH,
+          marginTop: -Math.round(headH * 0.3),
+          borderWidth: strokeWidth,
+          borderTopWidth: 0,
+          borderColor: color,
+          borderBottomLeftRadius: Math.round(cradleW / 2),
+          borderBottomRightRadius: Math.round(cradleW / 2),
+          backgroundColor: 'transparent',
+        }}
+      />
+      {/* Stem */}
+      <View style={{ width: strokeWidth, height: stemH, backgroundColor: color }} />
+      {/* Base */}
+      <View
+        style={{
+          width: baseW,
+          height: strokeWidth,
+          borderRadius: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+    </View>
+  );
+};
+
+/** Outline photo: rounded frame, sun dot top-right, mountain range from two angled strokes. */
+export const PhotoIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+}) => {
+  const w = size;
+  const h = Math.round(size * 0.82);
+  const sun = Math.round(size * 0.16);
+  const slopeLong = Math.round(size * 0.52);
+  const slopeShort = Math.round(size * 0.34);
+
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      <View
+        style={{
+          width: w,
+          height: h,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: Math.round(size * 0.16),
+          overflow: 'hidden',
+        }}
+      >
+        {/* Sun */}
+        <View
+          style={{
+            position: 'absolute',
+            top: Math.round(h * 0.18),
+            right: Math.round(w * 0.2),
+            width: sun,
+            height: sun,
+            borderRadius: Math.round(sun / 2),
+            borderWidth: strokeWidth,
+            borderColor: color,
+          }}
+        />
+        {/* Large mountain — rising stroke from the bottom-left. */}
+        <View
+          style={{
+            position: 'absolute',
+            bottom: Math.round(h * 0.14),
+            left: -Math.round(slopeLong * 0.12),
+            width: slopeLong,
+            height: strokeWidth,
+            borderRadius: strokeWidth,
+            backgroundColor: color,
+            transform: [{ rotate: '-38deg' }],
+          }}
+        />
+        {/* Small mountain — descending stroke to the bottom-right. */}
+        <View
+          style={{
+            position: 'absolute',
+            bottom: Math.round(h * 0.1),
+            right: -Math.round(slopeShort * 0.1),
+            width: slopeShort,
+            height: strokeWidth,
+            borderRadius: strokeWidth,
+            backgroundColor: color,
+            transform: [{ rotate: '38deg' }],
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+/** Outline video camera: rounded body + right-pointing lens wedge (camcorder silhouette). */
+export const VideoIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+}) => {
+  const bodyW = Math.round(size * 0.62);
+  const bodyH = Math.round(size * 0.56);
+  // The lens wedge is an outlined square rotated 45°; clipping its left half behind the
+  // body leaves a clean ">" prism, matching the classic camcorder glyph in pure outline.
+  const wedge = Math.round(bodyH * 0.62);
+
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {/* Body */}
+        <View
+          style={{
+            width: bodyW,
+            height: bodyH,
+            borderWidth: strokeWidth,
+            borderColor: color,
+            borderRadius: Math.round(size * 0.12),
+          }}
+        />
+        {/* Lens wedge — rotated outlined square, overlapping the body edge. */}
+        <View
+          style={{
+            width: wedge,
+            height: wedge,
+            marginLeft: -Math.round(wedge * 0.28),
+            borderTopWidth: strokeWidth,
+            borderRightWidth: strokeWidth,
+            borderColor: color,
+            borderTopRightRadius: Math.round(size * 0.08),
+            transform: [{ rotate: '45deg' }],
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+/** Outline gallery/image-video icon: photo frame with small play triangle overlay. */
+export const ImageVideoIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+}) => {
+  const w = Math.round(size * 0.76);
+  const h = Math.round(size * 0.68);
+  const playSize = Math.round(size * 0.26);
+
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      {/* Photo frame */}
+      <View
+        style={{
+          width: w,
+          height: h,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: Math.round(size * 0.1),
+          overflow: 'hidden',
+        }}
+      >
+        {/* Mountain landscape inside */}
+        <View
+          style={{
+            position: 'absolute',
+            bottom: Math.round(size * 0.1),
+            left: Math.round(size * 0.08),
+            width: Math.round(size * 0.3),
+            height: strokeWidth,
+            borderRadius: strokeWidth,
+            backgroundColor: color,
+            transform: [{ rotate: '-35deg' }],
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            bottom: Math.round(size * 0.1),
+            right: Math.round(size * 0.06),
+            width: Math.round(size * 0.24),
+            height: strokeWidth,
+            borderRadius: strokeWidth,
+            backgroundColor: color,
+            transform: [{ rotate: '40deg' }],
+          }}
+        />
+      </View>
+      {/* Small play triangle at bottom-right corner */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: Math.round(size * 0.06),
+          right: Math.round(size * 0.06),
+          width: 0,
+          height: 0,
+          borderLeftWidth: playSize * 0.55,
+          borderTopWidth: playSize * 0.32,
+          borderBottomWidth: playSize * 0.32,
+          borderLeftColor: color,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+    </View>
+  );
+};
+
+/** Outline trash/delete can: rounded lid + handle, open-top body, two ribs. */
+export const TrashIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+}) => {
+  const handleW = Math.round(size * 0.3);
+  const handleH = Math.round(size * 0.1);
+  const lidW = Math.round(size * 0.66);
+  const bodyW = Math.round(size * 0.5);
+  const bodyH = Math.round(size * 0.5);
+  const lidTop = Math.round(size * 0.28);
+  const bodyTop = lidTop + strokeWidth;
+  const ribTop = bodyTop + Math.round(size * 0.1);
+  const ribH = Math.round(size * 0.26);
+  const ribGap = Math.round(size * 0.11);
+  const cx = size / 2;
+
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      {/* Lid handle — small arch resting on the lid. */}
+      <View
+        style={{
+          position: 'absolute',
+          top: lidTop - handleH,
+          left: Math.round(cx - handleW / 2),
+          width: handleW,
+          height: handleH + strokeWidth,
+          borderWidth: strokeWidth,
+          borderBottomWidth: 0,
+          borderColor: color,
+          borderTopLeftRadius: Math.round(size * 0.06),
+          borderTopRightRadius: Math.round(size * 0.06),
+        }}
+      />
+      {/* Lid bar — spans slightly wider than the body. */}
+      <View
+        style={{
+          position: 'absolute',
+          top: lidTop,
+          left: Math.round(cx - lidW / 2),
+          width: lidW,
+          height: strokeWidth,
+          borderRadius: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      {/* Can body — open top (capped by the lid), rounded bottom. */}
+      <View
+        style={{
+          position: 'absolute',
+          top: bodyTop,
+          left: Math.round(cx - bodyW / 2),
+          width: bodyW,
+          height: bodyH,
+          borderWidth: strokeWidth,
+          borderTopWidth: 0,
+          borderColor: color,
+          borderBottomLeftRadius: Math.round(size * 0.12),
+          borderBottomRightRadius: Math.round(size * 0.12),
+        }}
+      />
+      {/* Two ribs inside the can. */}
+      {[-ribGap, ribGap].map((dx, i) => (
+        <View
+          key={i}
+          style={{
+            position: 'absolute',
+            top: ribTop,
+            left: Math.round(cx + dx - strokeWidth / 2),
+            width: strokeWidth,
+            height: ribH,
+            borderRadius: strokeWidth,
+            backgroundColor: color,
+          }}
+        />
+      ))}
+    </View>
+  );
+};
+
+/** Android-style share: three filled nodes joined by two arms (left → each right). */
+export const ShareIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+}) => {
+  const dot = Math.round(size * 0.26);
+  const r = dot / 2;
+  // Node centres: left-middle, top-right, bottom-right.
+  const left = { x: size * 0.24, y: size * 0.5 };
+  const top = { x: size * 0.74, y: size * 0.26 };
+  const bottom = { x: size * 0.74, y: size * 0.74 };
+
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      {/* Arms first, so the filled nodes cover the joins. Each bar spans the gap
+          between two node centres, is centred on their midpoint, then rotated
+          about its own centre so both ends land exactly on the dots. */}
+      {[top, bottom].map((n, i) => {
+        const dx = n.x - left.x;
+        const dy = n.y - left.y;
+        const len = Math.round(Math.hypot(dx, dy));
+        const deg = `${(Math.atan2(dy, dx) * 180) / Math.PI}deg`;
+        return (
+          <View
+            key={`arm${i}`}
+            style={{
+              position: 'absolute',
+              left: Math.round((left.x + n.x) / 2 - len / 2),
+              top: Math.round((left.y + n.y) / 2 - strokeWidth / 2),
+              width: len,
+              height: strokeWidth,
+              borderRadius: strokeWidth,
+              backgroundColor: color,
+              transform: [{ rotate: deg }],
+            }}
+          />
+        );
+      })}
+      {[left, top, bottom].map((n, i) => (
+        <View
+          key={`dot${i}`}
+          style={{
+            position: 'absolute',
+            left: Math.round(n.x - r),
+            top: Math.round(n.y - r),
+            width: dot,
+            height: dot,
+            borderRadius: r,
+            backgroundColor: color,
+          }}
+        />
+      ))}
+    </View>
+  );
+};
+
+/**
+ * Circular seek skip ring icon (◀ -10s / ▶ +10s).
+ * Renders an open-topped circular arrow ring with directional arrowhead
+ * and a centered seconds label.
+ */
+export const CircularSeekIcon: FC<IconProps> = ({
+  direction = 'forward',
+  label = '10',
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const head = Math.max(3, strokeWidth * 2);
+  return (
+    <View
+      style={[
+        styles.center,
+        {
+          width: size,
+          height: size,
+          position: 'relative',
+        },
+        style,
+      ]}
+    >
+      {/* Open-topped ring — curved arrow body */}
+      <View
+        style={{
+          position: 'absolute',
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderTopColor: 'transparent',
+        }}
+      />
+      {/* Arrowhead in the top gap, pointing in the seek direction (◀ back / ▶ forward) */}
+      <View
+        style={{
+          position: 'absolute',
+          top: -strokeWidth * 0.4,
+          left: direction === 'back' ? size * 0.24 : undefined,
+          right: direction === 'forward' ? size * 0.24 : undefined,
+          width: 0,
+          height: 0,
+          borderTopWidth: head,
+          borderBottomWidth: head,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+          borderLeftWidth: direction === 'forward' ? head : 0,
+          borderRightWidth: direction === 'back' ? head : 0,
+          borderLeftColor: direction === 'forward' ? color : 'transparent',
+          borderRightColor: direction === 'back' ? color : 'transparent',
+        }}
+      />
+      <Text
+        style={{
+          color: color as string,
+          fontSize: size * 0.4,
+          fontWeight: '600',
+          includeFontPadding: false,
+          textAlign: 'center',
+        }}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+/**
+ * View Details / Info (ⓘ) icon.
+ * Renders an outlined circular badge with a centered 'i' glyph (dot + stem).
+ */
+export const ViewDetailsIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const circleSize = Math.round(size * 0.85);
+  const dotSize = Math.max(2, Math.round(strokeWidth * 1.2));
+  const stemWidth = Math.max(1.5, strokeWidth);
+  const stemHeight = Math.round(size * 0.28);
+
+  return (
+    <View
+      style={[
+        styles.center,
+        {
+          width: size,
+          height: size,
+          position: 'relative',
+        },
+        style,
+      ]}
+    >
+      {/* Outer circle */}
+      <View
+        style={{
+          width: circleSize,
+          height: circleSize,
+          borderRadius: Math.round(circleSize / 2),
+          borderWidth: strokeWidth,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {/* Dot of the 'i' */}
+        <View
+          style={{
+            position: 'absolute',
+            top: Math.round(circleSize * 0.22),
+            width: dotSize,
+            height: dotSize,
+            borderRadius: Math.round(dotSize / 2),
+            backgroundColor: color,
+          }}
+        />
+        {/* Stem of the 'i' */}
+        <View
+          style={{
+            position: 'absolute',
+            bottom: Math.round(circleSize * 0.22),
+            width: stemWidth,
+            height: stemHeight,
+            borderRadius: stemWidth / 2,
+            backgroundColor: color,
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+/** Alias for ViewDetailsIcon */
+export const InfoIcon = ViewDetailsIcon;
+
+/**
+ * Compress icon — two arrows squeezing toward a centre line.
+ *
+ * The outline-set counterpart of the plugin's default `compress` glyph, drawn in the same
+ * "clean stroke" language as the rest of this file: one horizontal bar across the middle with a
+ * down-pointing arrow above it and an up-pointing arrow below, each a stem plus a two-armed
+ * chevron. It reads as "make this smaller" at 24 dp without any diagonal-resize ambiguity.
+ *
+ * Every stroke is a bar laid between two points, centred on their midpoint and rotated about its
+ * own centre, so the arms land exactly on the stems at any [size] / [strokeWidth] pair — the same
+ * construction {@link ShareIcon} uses for its arms.
+ */
+export const CompressIcon: FC<IconProps> = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const centre = size / 2;
+  // Chevron half-span and rise, equal so both arrowheads sit at a clean 45°.
+  const arm = size * 0.145;
+  // Arrow apexes stop short of the centre bar, leaving a visible gap on both sides.
+  const apexTop = size * 0.4;
+  const apexBottom = size * 0.6;
+
+  const strokes: Array<[number, number, number, number]> = [
+    // The line the two arrows are compressing toward.
+    [size * 0.19, centre, size * 0.81, centre],
+    // Arrow above, pointing down: stem, then its two chevron arms.
+    [centre, size * 0.15, centre, apexTop],
+    [centre, apexTop, centre - arm, apexTop - arm],
+    [centre, apexTop, centre + arm, apexTop - arm],
+    // Arrow below, pointing up — the same shape mirrored through the centre bar.
+    [centre, size * 0.85, centre, apexBottom],
+    [centre, apexBottom, centre - arm, apexBottom + arm],
+    [centre, apexBottom, centre + arm, apexBottom + arm],
+  ];
+  return (
+    <View
+      style={[
+        styles.center,
+        { width: size, height: size, position: 'relative' },
+        style,
+      ]}
+    >
+      {strokes.map(([x1, y1, x2, y2], i) => {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const len = Math.max(strokeWidth, Math.hypot(dx, dy));
+        return (
+          <View
+            key={`stroke${i}`}
+            style={{
+              position: 'absolute',
+              left: (x1 + x2) / 2 - len / 2,
+              top: (y1 + y2) / 2 - strokeWidth / 2,
+              width: len,
+              height: strokeWidth,
+              borderRadius: strokeWidth,
+              backgroundColor: color,
+              transform: [
+                { rotate: `${(Math.atan2(dy, dx) * 180) / Math.PI}deg` },
+              ],
+            }}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});