@astratra/native-ui 0.1.0

package/src/components/CollapsibleHeader.js

@@ -0,0 +1,253 @@
+/**
+ * The page header that folds on scroll, and the screen that wires it.
+ *
+ * The rule — fixed back button and actions, large title scrolling away, a
+ * small blurred bar carrying the page name once the title has gone, a fade
+ * under it rather than a line — and its numbers are in
+ * logic/collapsibleHeader.js.
+ *
+ * On iOS the bar is the system's blur (the material of Apple's bars), masked
+ * by a gradient so it dies out in the overflow. The mask needs a MaskedView,
+ * which is injected (`MaskedView` prop, e.g. `@react-native-masked-view/
+ * masked-view`) rather than required: without it iOS gets the blur down to
+ * the bar's edge and the page-colour fade below it. On Android, a plain
+ * gradient of the page colour: its blur came out "dirty".
+ */
+const { React, h, RN, Reanimated, AnimatedView, BlurView, LinearGradient, useScheme } = require('./runtime');
+const {
+  HEADER_BAR_HEIGHT,
+  HEADER_DEFAULT_THRESHOLD,
+  headerThreshold,
+  headerBarFade,
+  headerTitleFade,
+  headerBottomFade,
+  headerGradientStops,
+  androidHeaderColors
+} = require('../logic/collapsibleHeader');
+
+const { interpolate, useAnimatedStyle, useSharedValue } = Reanimated;
+
+/**
+ * The scroll of a page and its threshold, for a screen that lays out the
+ * header itself.
+ *
+ * - `onScroll` goes to the page's scroll (with `scrollEventThrottle={16}`);
+ *   the scrolling content starts with `paddingTop: topInset +
+ *   HEADER_BAR_HEIGHT` (`topInset` = 0 when a safe-area view already pads it).
+ * - `onTitleLayout` goes to the `onLayout` of the large title (or the block
+ *   holding it), a DIRECT child of the scrolling content.
+ * - `onListTitleLayout`: the same block used as a FlatList's
+ *   `ListHeaderComponent`, where the measure does not include the top padding.
+ * - `measureTitle(node)`: for a title whose position is unknown (nested
+ *   views), measured in the window against `originRef`, a view placed at the
+ *   top of the scrolling area — both measures in the same frame, whatever the
+ *   system.
+ */
+function useCollapsibleHeader({ topInset = 0 } = {}) {
+  const scrollY = useSharedValue(0);
+  const threshold = useSharedValue(HEADER_DEFAULT_THRESHOLD);
+  const originRef = React.useRef(null);
+  const onScroll = React.useCallback(
+    (event) => {
+      scrollY.value = event.nativeEvent.contentOffset.y;
+    },
+    [scrollY]
+  );
+  const placeThreshold = React.useCallback(
+    (titleBottom) => {
+      threshold.value = headerThreshold(titleBottom, topInset);
+    },
+    [threshold, topInset]
+  );
+  const onTitleLayout = React.useCallback(
+    (event) => placeThreshold(event.nativeEvent.layout.y + event.nativeEvent.layout.height),
+    [placeThreshold]
+  );
+  const onListTitleLayout = React.useCallback(
+    (event) =>
+      placeThreshold(topInset + HEADER_BAR_HEIGHT + event.nativeEvent.layout.y + event.nativeEvent.layout.height),
+    [placeThreshold, topInset]
+  );
+  const measureTitle = React.useCallback(
+    (node) => {
+      const origin = originRef.current;
+      if (!node || !origin) return;
+      origin.measureInWindow((_x, areaTop) =>
+        node.measureInWindow((_x2, y, _w, height) => placeThreshold(y - areaTop + height + scrollY.value))
+      );
+    },
+    [scrollY, placeThreshold]
+  );
+  return { scrollY, threshold, onScroll, onTitleLayout, onListTitleLayout, measureTitle, originRef };
+}
+
+const styles = {
+  zone: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 },
+  /* Taller than the zone: it overflows below for the fade. */
+  background: { position: 'absolute', top: 0, left: 0, right: 0 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  /* Both sides share a minimum width: the title stays centred even with a
+     single action on the right. */
+  side: { minWidth: 44, flexDirection: 'row', alignItems: 'center', gap: 8 },
+  right: { justifyContent: 'flex-end' },
+  center: { flex: 1, alignItems: 'center', paddingHorizontal: 10 },
+  title: { fontWeight: '700', fontSize: 16, letterSpacing: -0.2 }
+};
+
+function CollapsibleHeader({
+  title,
+  scrollY,
+  threshold,
+  leading,
+  actions,
+  topInset = 0,
+  gutter = 16,
+  pageBackground,
+  titleColor,
+  MaskedView,
+  scheme: schemeOverride,
+  testID
+}) {
+  const scheme = useScheme(schemeOverride);
+  const background = pageBackground || (scheme === 'dark' ? '#000000' : '#ffffff');
+  const barHeight = topInset + HEADER_BAR_HEIGHT;
+  const fade = headerBottomFade(RN.Platform.OS);
+  const stops = headerGradientStops(barHeight, fade);
+  const iosBlur = RN.Platform.OS === 'ios';
+
+  const barStyle = useAnimatedStyle(() => {
+    const range = headerBarFade(threshold.value);
+    return { opacity: interpolate(scrollY.value, range.input, range.output, 'clamp') };
+  });
+  const titleStyle = useAnimatedStyle(() => {
+    const ranges = headerTitleFade(threshold.value);
+    return {
+      opacity: interpolate(scrollY.value, ranges.opacity.input, ranges.opacity.output, 'clamp'),
+      transform: [{ translateY: interpolate(scrollY.value, ranges.translateY.input, ranges.translateY.output, 'clamp') }]
+    };
+  });
+
+  const blur = h(BlurView, {
+    intensity: 80,
+    tint: scheme === 'dark' ? 'systemChromeMaterialDark' : 'systemChromeMaterialLight',
+    style: MaskedView ? RN.StyleSheet.absoluteFill : { height: barHeight }
+  });
+  const pageFade = (style) =>
+    h(LinearGradient, { colors: androidHeaderColors(background), locations: stops, style });
+
+  let backdrop;
+  if (iosBlur && MaskedView) {
+    backdrop = h(
+      MaskedView,
+      {
+        style: RN.StyleSheet.absoluteFill,
+        maskElement: h(LinearGradient, {
+          colors: ['#000000', '#000000', 'rgba(0,0,0,0)'],
+          locations: stops,
+          style: RN.StyleSheet.absoluteFill
+        })
+      },
+      blur
+    );
+  } else if (iosBlur) {
+    /* No mask available: the blur stops at the bar's edge, and the page
+       colour's own fade carries the overflow. */
+    backdrop = h(
+      RN.View,
+      { style: RN.StyleSheet.absoluteFill },
+      pageFade(RN.StyleSheet.absoluteFill),
+      blur
+    );
+  } else {
+    backdrop = pageFade(RN.StyleSheet.absoluteFill);
+  }
+
+  return h(
+    RN.View,
+    { testID, pointerEvents: 'box-none', style: [styles.zone, { height: barHeight }] },
+    h(AnimatedView, { pointerEvents: 'none', style: [styles.background, { height: barHeight + fade }, barStyle] }, backdrop),
+    h(
+      RN.View,
+      {
+        pointerEvents: 'box-none',
+        style: [styles.row, { marginTop: topInset, height: HEADER_BAR_HEIGHT, paddingHorizontal: gutter }]
+      },
+      h(RN.View, { style: styles.side }, leading || null),
+      h(
+        AnimatedView,
+        { pointerEvents: 'none', style: [styles.center, titleStyle] },
+        h(
+          RN.Text,
+          {
+            numberOfLines: 1,
+            accessibilityRole: 'header',
+            style: [styles.title, { color: titleColor || (scheme === 'dark' ? '#ffffff' : '#0d1235') }]
+          },
+          title
+        )
+      ),
+      h(RN.View, { style: [styles.side, styles.right] }, actions || null)
+    )
+  );
+}
+
+/**
+ * A scrolling screen with the collapsible header already wired: the large
+ * title (`largeTitle`) scrolls, sets the threshold by its own layout, and the
+ * header floats above everything.
+ */
+function CollapsibleScreen({
+  title,
+  largeTitle,
+  children,
+  leading,
+  actions,
+  topInset = 0,
+  gutter = 16,
+  pageBackground,
+  titleColor,
+  MaskedView,
+  scheme,
+  contentContainerStyle,
+  scrollProps,
+  testID
+}) {
+  const header = useCollapsibleHeader({ topInset });
+  const onScroll = (event) => {
+    header.onScroll(event);
+    if (scrollProps && scrollProps.onScroll) scrollProps.onScroll(event);
+  };
+  return h(
+    RN.View,
+    { testID, style: { flex: 1, backgroundColor: pageBackground } },
+    h(RN.View, { ref: header.originRef, collapsable: false }),
+    h(
+      RN.ScrollView,
+      {
+        showsVerticalScrollIndicator: false,
+        ...scrollProps,
+        onScroll,
+        scrollEventThrottle: 16,
+        /* Under the fixed header: the large title starts below the back button's row. */
+        contentContainerStyle: [{ flexGrow: 1, paddingTop: topInset + HEADER_BAR_HEIGHT }, contentContainerStyle]
+      },
+      largeTitle ? h(RN.View, { style: { paddingHorizontal: gutter }, onLayout: header.onTitleLayout }, largeTitle) : null,
+      children
+    ),
+    h(CollapsibleHeader, {
+      title,
+      scrollY: header.scrollY,
+      threshold: header.threshold,
+      leading,
+      actions,
+      topInset,
+      gutter,
+      pageBackground,
+      titleColor,
+      MaskedView,
+      scheme
+    })
+  );
+}
+
+module.exports = { useCollapsibleHeader, CollapsibleHeader, CollapsibleScreen };

package/src/components/FloatingPagination.js

@@ -0,0 +1,135 @@
+/**
+ * List pagination as a pill that floats at the bottom, like the tab bar.
+ *
+ * It used to be a footer bar that ate the bottom of the screen, then a
+ * selector at the end of the list that had to be scrolled to. Now: a round
+ * pill, glass on iOS (the same as the tab bar), a light card on Android. It
+ * stays put while the list passes under it, and behaves like the tab bar: it
+ * shrinks when scrolling down, returns when scrolling up (`collapse`, from
+ * `useCollapsingBar`). Keep `paginationReserve(bottomInset)` of room under the
+ * list so its last row can scroll above the pill.
+ */
+const { h, RN, AnimatedView, GlassEffect, getGlassMode, useScheme } = require('./runtime');
+const { useCollapseTransform } = require('./useCollapsingBar');
+const { Chevron } = require('./Chevron');
+const { PAGINATION_HEIGHT } = require('../logic/tabBar');
+const { floatingBottomOffset } = require('../logic/collapse');
+
+/* Properly round, like the tab bar: the ends are half circles. */
+const glassShape = { height: PAGINATION_HEIGHT, borderRadius: PAGINATION_HEIGHT / 2, overflow: 'hidden' };
+const cardShape = {
+  height: PAGINATION_HEIGHT,
+  borderRadius: PAGINATION_HEIGHT / 2,
+  backgroundColor: '#fdfdff',
+  borderWidth: RN.StyleSheet.hairlineWidth,
+  borderColor: 'rgba(13,18,53,0.06)',
+  shadowColor: '#18234f',
+  shadowOpacity: 0.14,
+  shadowRadius: 22,
+  shadowOffset: { width: 0, height: 10 },
+  elevation: 8
+};
+const darkCard = { backgroundColor: '#1c1c1e', borderColor: 'rgba(255,255,255,0.08)' };
+
+function FloatingPagination({
+  page,
+  totalPages,
+  canPrevious,
+  canNext,
+  onPrevious,
+  onNext,
+  previousLabel,
+  nextLabel,
+  collapse,
+  bottom,
+  bottomInset = 0,
+  onHaptic,
+  previousIcon,
+  nextIcon,
+  scheme: schemeOverride,
+  testID
+}) {
+  const scheme = useScheme(schemeOverride);
+  const dark = scheme === 'dark';
+  const ink = dark ? '#ffffff' : '#0d1235';
+  const foldStyle = useCollapseTransform(collapse);
+  const glass = getGlassMode() === 'native';
+
+  const arrow = (label, icon, enabled, onPress) =>
+    h(
+      RN.Pressable,
+      {
+        accessibilityRole: 'button',
+        accessibilityLabel: label,
+        accessibilityState: { disabled: !enabled },
+        disabled: !enabled,
+        hitSlop: 6,
+        onPress: () => {
+          if (onHaptic) onHaptic();
+          onPress();
+        },
+        style: ({ pressed }) => [
+          { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
+          pressed ? { backgroundColor: dark ? 'rgba(255,255,255,0.12)' : 'rgba(13,18,53,0.08)' } : null,
+          enabled ? null : { opacity: 0.3 }
+        ]
+      },
+      icon
+    );
+
+  return h(
+    AnimatedView,
+    {
+      pointerEvents: 'box-none',
+      testID,
+      style: [
+        {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          alignItems: 'center',
+          /* A fixed button already in the page's footer: the pill sits above
+             it instead of covering it. Otherwise, the tab bar's place. */
+          bottom: bottom ?? floatingBottomOffset(bottomInset),
+          transformOrigin: 'bottom'
+        },
+        foldStyle
+      ]
+    },
+    h(
+      RN.View,
+      { style: glass ? glassShape : [cardShape, dark ? darkCard : null] },
+      glass
+        ? h(GlassEffect.GlassView, {
+            glassEffectStyle: 'regular',
+            tintColor: dark ? 'rgba(0,0,0,0.62)' : 'rgba(255,255,255,0.42)',
+            colorScheme: scheme,
+            style: RN.StyleSheet.absoluteFill
+          })
+        : null,
+      h(
+        RN.View,
+        { style: { flex: 1, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 6, gap: 2 } },
+        arrow(previousLabel, previousIcon || h(Chevron, { direction: 'left', color: ink }), canPrevious, onPrevious),
+        h(
+          RN.Text,
+          {
+            style: {
+              minWidth: 70,
+              textAlign: 'center',
+              fontWeight: '600',
+              fontSize: 13,
+              fontVariant: ['tabular-nums'],
+              color: dark ? 'rgba(255,255,255,0.7)' : '#5c6178'
+            }
+          },
+          h(RN.Text, { style: { fontWeight: '800', fontSize: 15, color: ink } }, String(page)),
+          `  /  ${totalPages}`
+        ),
+        arrow(nextLabel, nextIcon || h(Chevron, { direction: 'right', color: ink }), canNext, onNext)
+      )
+    )
+  );
+}
+
+module.exports = { FloatingPagination };

package/src/components/GlassButton.js

@@ -0,0 +1,117 @@
+/**
+ * The glass button — the one in Apple's Photos app: a translucent circle or
+ * pill that lets you guess what it covers, a soft shadow, and a solid tint
+ * when it carries the main action.
+ *
+ * A glass with depth: the icon is caught in it like an object in an ice cube
+ * and comes out sharp (see `glassButtonMaterial`). Three layers, in this
+ * order: the tint, the highlight, then the content. The content goes ABOVE
+ * the highlight — a white veil over the icon would dim it.
+ */
+const { h, RN, LinearGradient, getGlassMode, useScheme } = require('./runtime');
+const { GlassSurface } = require('./GlassSurface');
+const { glassButtonMaterial, glassButtonTint } = require('../logic/glass');
+
+/* The shadow is iOS's, where the glass carries it discreetly. On Android it
+   became a full boxShadow under an almost white fill: a grey halo around
+   every round button. Android gets none. */
+const IOS_SHADOW = {
+  shadowColor: '#0d1235',
+  shadowOpacity: 0.1,
+  shadowRadius: 10,
+  shadowOffset: { width: 0, height: 4 }
+};
+
+const control = {
+  flex: 1,
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 6,
+  paddingHorizontal: 12
+};
+
+/* The press is iOS's gesture; on Android the ripple is enough, and both
+   together make a button that jerks. */
+const PRESSED = { opacity: 0.75, transform: [{ scale: 0.96 }] };
+
+function GlassButton({
+  children,
+  onPress,
+  onLongPress,
+  accessibilityLabel,
+  size = 44,
+  pill = false,
+  tint,
+  disabled = false,
+  selected = false,
+  scheme: schemeOverride,
+  style,
+  testID
+}) {
+  const scheme = useScheme(schemeOverride);
+  const mode = getGlassMode();
+  const material = glassButtonMaterial({ mode, scheme, tinted: Boolean(tint) });
+  const android = RN.Platform.OS === 'android';
+  return h(
+    GlassSurface,
+    {
+      style: [
+        android ? null : IOS_SHADOW,
+        { height: size, borderRadius: size / 2, width: pill ? undefined : size },
+        disabled ? { opacity: 0.5 } : null,
+        style
+      ],
+      glassStyle: material.glassStyle,
+      tintColor: tint || glassButtonTint({ mode, selected }),
+      interactive: Boolean(onPress) && !disabled,
+      scheme
+    },
+    /* Apple's glass ignores the fill it is given: a tinted button's colour is
+       therefore a layer of its own, under the highlight. */
+    tint
+      ? h(RN.View, {
+          pointerEvents: 'none',
+          style: [RN.StyleSheet.absoluteFill, { backgroundColor: tint, opacity: 0.8 }]
+        })
+      : null,
+    h(LinearGradient, {
+      pointerEvents: 'none',
+      colors: material.highlight,
+      locations: [0, 0.55, 1],
+      start: { x: 0.5, y: 0 },
+      end: { x: 0.5, y: 1 },
+      style: RN.StyleSheet.absoluteFill
+    }),
+    h(
+      RN.Pressable,
+      {
+        testID,
+        accessibilityRole: 'button',
+        accessibilityLabel,
+        accessibilityState: { disabled, selected },
+        disabled,
+        hitSlop: 6,
+        onPress,
+        onLongPress,
+        /* Without it the button had no touch feedback at all on Android. The
+           ripple is light on a tinted button, dark on a light one. */
+        android_ripple: {
+          color: tint ? 'rgba(255,255,255,0.24)' : 'rgba(13,18,53,0.10)',
+          borderless: true,
+          foreground: true
+        },
+        style: ({ pressed }) => [
+          control,
+          /* With no fill of its own, iOS casts this shadow onto the silhouette
+             of the icon and text only: the glow that lifts them out. */
+          material.glow,
+          pressed && !android ? PRESSED : null
+        ]
+      },
+      children
+    )
+  );
+}
+
+module.exports = { GlassButton };

package/src/components/GlassSurface.js

@@ -0,0 +1,61 @@
+/**
+ * Apple's glass on iOS, a visible surface everywhere else.
+ *
+ * On iOS 26+ this is Apple's `GlassView`, as is. Elsewhere it is a plain View
+ * whose fill is the caller's tint AT THE WEIGHT APPLE REALLY GIVES IT
+ * (`tintAtAppleWeight`), with iOS's shadow rule applied
+ * (`surfaceStyleOffApple`). Both rules, and the reason Android gets no blur,
+ * are in logic/glass.js.
+ */
+const { h, RN, GlassEffect, getGlassMode, useScheme } = require('./runtime');
+const { tintAtAppleWeight, surfaceStyleOffApple } = require('../logic/glass');
+
+const base = { overflow: 'hidden' };
+
+function GlassSurface({
+  children,
+  style,
+  tintColor = 'rgba(255,255,255,0.12)',
+  glassStyle = 'regular',
+  interactive = false,
+  scheme: schemeOverride,
+  testID
+}) {
+  const scheme = useScheme(schemeOverride);
+  if (getGlassMode() === 'native') {
+    return h(
+      GlassEffect.GlassView,
+      {
+        glassEffectStyle: glassStyle,
+        tintColor,
+        /* The APP's scheme, not the phone's: otherwise the glass stays light
+           on a dark page and its content drowns. */
+        colorScheme: scheme,
+        isInteractive: interactive,
+        style: [base, style],
+        testID
+      },
+      children
+    );
+  }
+  const flat = surfaceStyleOffApple(
+    RN.StyleSheet.flatten([base, { backgroundColor: tintAtAppleWeight(tintColor, interactive) }, style]),
+    interactive
+  );
+  return h(RN.View, { style: flat, testID }, children);
+}
+
+/**
+ * A group of glass elements. On iOS, `GlassContainer` lets neighbouring
+ * glass shapes merge and carries the spacing. Off iOS a bare View was
+ * rendered and the elements ended up glued to each other: the spacing
+ * becomes a `gap`.
+ */
+function GlassGroup({ children, spacing = 8, style, ...props }) {
+  if (getGlassMode() === 'native') {
+    return h(GlassEffect.GlassContainer, { spacing, style, ...props }, children);
+  }
+  return h(RN.View, { style: [{ gap: spacing }, style], ...props }, children);
+}
+
+module.exports = { GlassSurface, GlassGroup };