react-native-terra-ui 0.11.10 → 0.11.12

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [0.11.12](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.11...v0.11.12) (2026-09-17)
+
+### Features
+
+* **ui:** [surface] add default content padding ([966c38a](https://github.com/earthlin9/react-native-terra-ui/commit/966c38adb42d3b596e577f6c4116896680d27d6e))
+
+### Bug Fixes
+
+* **ui:** [header] unify layout and preserve accessory gradients and padding ([637e3e1](https://github.com/earthlin9/react-native-terra-ui/commit/637e3e19fab4b4e30b6f80873d72acd7167a3a69))
+
+## [0.11.11](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.10...v0.11.11) (2026-09-17)
+
+### Features
+
+* **ui:** [box] cast the rendered element with an `as` prop ([9f294bb](https://github.com/earthlin9/react-native-terra-ui/commit/9f294bbff87e1a49454f0f1defb255f7f7df2cda))
+* **ui:** [header] keep the background fade inside the surface ([85062d0](https://github.com/earthlin9/react-native-terra-ui/commit/85062d08af02920a8fa3671c4339d54e4915caea))
+
 ## [0.11.10](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.9...v0.11.10) (2026-09-15)
 
 ### Bug Fixes

package/lib/module/components/box/Box.js

@@ -5,14 +5,20 @@ import { forwardRef } from "react";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Slot } from "../slot/index.js";
 import { BOX_STYLE_PROP_KEYS, resolveBoxStyle } from "./utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const STYLE_KEYS = new Set(BOX_STYLE_PROP_KEYS);
+
+/** Props owned by Box itself — everything else belongs to the rendered element. */
 
 /**
- * Base layout primitive: a `View` styled through theme-token props.
- * The only component family exposing token style-props.
+ * Props of `Box` when cast as `T`. Token style-props plus everything the
+ * rendered component accepts — `<Box as={Pressable} onPress={…} />` type-checks
+ * against `Pressable`, not `View`.
  */
-export const Box = /*#__PURE__*/forwardRef(function Box({
+
+/** Erased prop shape the implementation works with — the generic lives on the exported cast. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const STYLE_KEYS = new Set(BOX_STYLE_PROP_KEYS);
+const BoxWithRef = /*#__PURE__*/forwardRef(function Box({
+  as,
   asChild,
   style,
   children,
@@ -22,31 +28,50 @@ export const Box = /*#__PURE__*/forwardRef(function Box({
     theme
   } = useUnistyles();
   const styleProps = {};
-  const viewProps = {};
+  const elementProps = {};
   for (const key of Object.keys(rest)) {
     const value = rest[key];
-    if (STYLE_KEYS.has(key)) styleProps[key] = value;else viewProps[key] = value;
+    if (STYLE_KEYS.has(key)) styleProps[key] = value;else elementProps[key] = value;
   }
   const mergedStyle = [styles.root, resolveBoxStyle(styleProps, theme), style];
   if (asChild) {
     return /*#__PURE__*/_jsx(Slot, {
       ownerName: "Box",
       slotProps: {
-        ...viewProps,
+        ...elementProps,
         style: mergedStyle,
         ref
       },
       children: children
     });
   }
-  return /*#__PURE__*/_jsx(View, {
+  const Component = as ?? View;
+  return /*#__PURE__*/_jsx(Component, {
     ref: ref,
     style: mergedStyle,
-    ...viewProps,
+    ...elementProps,
     children: children
   });
 });
 
+/**
+ * Base layout primitive: a `View` styled through theme-token props.
+ * The only component family exposing token style-props.
+ *
+ * Pass `as` to cast it as another component — the token style-props still
+ * resolve, and the rest of the props are typed against that component.
+ * Note that `as` renders a component Box does not own, so a Unistyles style
+ * handed to it only stays theme-reactive if that component's own module runs
+ * through the Unistyles Babel plugin (see the stylesheet note below).
+ *
+ * @example
+ * ```tsx
+ * <Box row gap="2" p="4" />
+ * <Box as={Pressable} onPress={onPress} p="3" radius="md" />
+ * ```
+ */
+export const Box = BoxWithRef;
+
 // ─── Styles ───────────────────────────────────────────────────────────────────
 //
 // Box has no static style of its own — this stylesheet exists so the

package/lib/module/components/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","StyleSheet","useUnistyles","Slot","BOX_STYLE_PROP_KEYS","resolveBoxStyle","jsx","_jsx","STYLE_KEYS","Set","Box","asChild","style","children","rest","ref","theme","styleProps","viewProps","key","Object","keys","value","has","mergedStyle","styles","root","ownerName","slotProps","View","create"],"sourceRoot":"../../../../src","sources":["components/box/Box.tsx"],"mappings":";;;AAAA,SAA4BA,UAAU,QAAQ,OAAO;AAGrD,SAASC,UAAU,EAAEC,YAAY,QAAQ,wBAAwB;AAEjE,SAASC,IAAI;AACb,SAASC,mBAAmB,EAAsBC,eAAe;AAAkB,SAAAC,GAAA,IAAAC,IAAA;AAOnF,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAASL,mBAAwC,CAAC;;AAE5E;AACA;AACA;AACA;AACA,OAAO,MAAMM,GAAG,gBAAGV,UAAU,CAAsC,SAASU,GAAGA,CAC7E;EAAEC,OAAO;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACrCC,GAAG,EACH;EACA,MAAM;IAAEC;EAAM,CAAC,GAAGd,YAAY,CAAC,CAAC;EAEhC,MAAMe,UAAmC,GAAG,CAAC,CAAC;EAC9C,MAAMC,SAAkC,GAAG,CAAC,CAAC;EAC7C,KAAK,MAAMC,GAAG,IAAIC,MAAM,CAACC,IAAI,CAACP,IAAI,CAAC,EAAE;IACnC,MAAMQ,KAAK,GAAIR,IAAI,CAA6BK,GAAG,CAAC;IACpD,IAAIX,UAAU,CAACe,GAAG,CAACJ,GAAG,CAAC,EAAEF,UAAU,CAACE,GAAG,CAAC,GAAGG,KAAK,CAAC,KAC5CJ,SAAS,CAACC,GAAG,CAAC,GAAGG,KAAK;EAC7B;EAEA,MAAME,WAAW,GAAG,CAACC,MAAM,CAACC,IAAI,EAAErB,eAAe,CAACY,UAAU,EAAmBD,KAAK,CAAC,EAAEJ,KAAK,CAAC;EAE7F,IAAID,OAAO,EAAE;IACX,oBACEJ,IAAA,CAACJ,IAAI;MAACwB,SAAS,EAAC,KAAK;MAACC,SAAS,EAAE;QAAE,GAAGV,SAAS;QAAEN,KAAK,EAAEY,WAAW;QAAET;MAAI,CAAE;MAAAF,QAAA,EACxEA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEN,IAAA,CAACsB,IAAI;IAACd,GAAG,EAAEA,GAAI;IAACH,KAAK,EAAEY,WAAY;IAAA,GAAMN,SAAS;IAAAL,QAAA,EAC/CA;EAAQ,CACL,CAAC;AAEX,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMY,MAAM,GAAGxB,UAAU,CAAC6B,MAAM,CAAC,OAAO;EAAEJ,IAAI,EAAE,CAAC;AAAE,CAAC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["forwardRef","StyleSheet","useUnistyles","Slot","BOX_STYLE_PROP_KEYS","resolveBoxStyle","jsx","_jsx","STYLE_KEYS","Set","BoxWithRef","Box","as","asChild","style","children","rest","ref","theme","styleProps","elementProps","key","Object","keys","value","has","mergedStyle","styles","root","ownerName","slotProps","Component","View","create"],"sourceRoot":"../../../../src","sources":["components/box/Box.tsx"],"mappings":";;;AAAA,SAGEA,UAAU,QAGL,OAAO;AAGd,SAASC,UAAU,EAAEC,YAAY,QAAQ,wBAAwB;AAEjE,SAASC,IAAI;AACb,SAASC,mBAAmB,EAAsBC,eAAe;;AAEjE;;AAMA;AACA;AACA;AACA;AACA;;AAMA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAQA,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAASL,mBAAwC,CAAC;AAE5E,MAAMM,UAAU,gBAAGV,UAAU,CAA0B,SAASW,GAAGA,CACjE;EAAEC,EAAE;EAAEC,OAAO;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAqB,CAAC,EACzDC,GAAG,EACH;EACA,MAAM;IAAEC;EAAM,CAAC,GAAGhB,YAAY,CAAC,CAAC;EAEhC,MAAMiB,UAAmC,GAAG,CAAC,CAAC;EAC9C,MAAMC,YAAqC,GAAG,CAAC,CAAC;EAChD,KAAK,MAAMC,GAAG,IAAIC,MAAM,CAACC,IAAI,CAACP,IAAI,CAAC,EAAE;IACnC,MAAMQ,KAAK,GAAGR,IAAI,CAACK,GAAG,CAAC;IACvB,IAAIb,UAAU,CAACiB,GAAG,CAACJ,GAAG,CAAC,EAAEF,UAAU,CAACE,GAAG,CAAC,GAAGG,KAAK,CAAC,KAC5CJ,YAAY,CAACC,GAAG,CAAC,GAAGG,KAAK;EAChC;EAEA,MAAME,WAAW,GAAG,CAACC,MAAM,CAACC,IAAI,EAAEvB,eAAe,CAACc,UAAU,EAAmBD,KAAK,CAAC,EAAEJ,KAAK,CAAC;EAE7F,IAAID,OAAO,EAAE;IACX,oBACEN,IAAA,CAACJ,IAAI;MAAC0B,SAAS,EAAC,KAAK;MAACC,SAAS,EAAE;QAAE,GAAGV,YAAY;QAAEN,KAAK,EAAEY,WAAW;QAAET;MAAI,CAAE;MAAAF,QAAA,EAC3EA;IAAQ,CACL,CAAC;EAEX;EAEA,MAAMgB,SAAS,GAAInB,EAAE,IAAIoB,IAAoB;EAE7C,oBACEzB,IAAA,CAACwB,SAAS;IAACd,GAAG,EAAEA,GAAI;IAACH,KAAK,EAAEY,WAAY;IAAA,GAAKN,YAAY;IAAAL,QAAA,EACtDA;EAAQ,CACA,CAAC;AAEhB,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMJ,GAAG,GAAGD,UAEK;;AAExB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMiB,MAAM,GAAG1B,UAAU,CAACgC,MAAM,CAAC,OAAO;EAAEL,IAAI,EAAE,CAAC;AAAE,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/header/hooks/use-header-color.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import { useContext } from "react";
+import { useUnistyles } from "react-native-unistyles";
+import { resolveThemeColor } from "../../../utils/resolve-theme-color.js";
+import { ScreenContext } from "../../screen/ScreenContext.js";
+
+/** Explicit header color wins, then Screen, then the theme canvas. */
+export function useHeaderColor(token) {
+  const {
+    theme
+  } = useUnistyles();
+  const screen = useContext(ScreenContext);
+  return (token ? resolveThemeColor(token, theme) : screen?.background) ?? theme.color["surface.canvas"];
+}
+//# sourceMappingURL=use-header-color.js.map

package/lib/module/components/header/hooks/use-header-color.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","useUnistyles","resolveThemeColor","ScreenContext","useHeaderColor","token","theme","screen","background","color"],"sourceRoot":"../../../../../src","sources":["components/header/hooks/use-header-color.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,YAAY,QAAQ,wBAAwB;AAGrD,SAASC,iBAAiB;AAC1B,SAASC,aAAa;;AAEtB;AACA,OAAO,SAASC,cAAcA,CAACC,KAAkB,EAAE;EACjD,MAAM;IAAEC;EAAM,CAAC,GAAGL,YAAY,CAAC,CAAC;EAChC,MAAMM,MAAM,GAAGP,UAAU,CAACG,aAAa,CAAC;EACxC,OAAO,CAACE,KAAK,GAAGH,iBAAiB,CAACG,KAAK,EAAEC,KAAK,CAAC,GAAGC,MAAM,EAAEC,UAAU,KAAKF,KAAK,CAACG,KAAK,CAAC,gBAAgB,CAAC;AACxG","ignoreList":[]}

package/lib/module/components/header/hooks/use-large-title-header.js

@@ -0,0 +1,81 @@
+"use strict";
+
+import { useEffect, useLayoutEffect, useState } from "react";
+import { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { useUnistyles } from "react-native-unistyles";
+import { useScreen } from "../../screen/ScreenContext.js";
+/** Coordinates measured layout and UI-thread animation without animating accessory padding. */
+export function useLargeTitleHeader({
+  hasAccessory,
+  accessoryBehavior,
+  isLargeTitleHidden
+}) {
+  const {
+    theme
+  } = useUnistyles();
+  const {
+    scrollY,
+    contentTopPadding,
+    setHeaderAccessoryHeight
+  } = useScreen();
+  const [accessoryHeight, setAccessoryHeight] = useState(0);
+  const [largeTitleHeight, setLargeTitleHeight] = useState(0);
+  const hidden = useSharedValue(isLargeTitleHidden);
+  useEffect(() => {
+    hidden.value = isLargeTitleHidden;
+  }, [hidden, isLargeTitleHidden]);
+  const barHeight = theme.layout.header.height;
+  const isSticky = hasAccessory && accessoryBehavior === "sticky" && !isLargeTitleHidden;
+  // The measured overlay always includes bottom padding. Expanded scroll content
+  // excludes it; compact-only screens reserve the entire accessory.
+  const reservedAccessoryHeight = hasAccessory ? Math.max(0, Math.round(accessoryHeight - (isLargeTitleHidden ? 0 : theme.spacing["2"]))) : 0;
+  const accessoryOffset = isSticky ? Math.max(0, contentTopPadding + largeTitleHeight - barHeight) : 0;
+  useLayoutEffect(() => {
+    setHeaderAccessoryHeight(isSticky ? 0 : reservedAccessoryHeight);
+    return () => setHeaderAccessoryHeight(0);
+  }, [isSticky, reservedAccessoryHeight, setHeaderAccessoryHeight]);
+  const accessoryStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: isSticky && !hidden.value ? Math.max(0, accessoryOffset - scrollY.value) : 0
+    }]
+  }));
+  const surfaceStyle = useAnimatedStyle(() => {
+    if (hidden.value) return {
+      opacity: 1
+    };
+    const distance = isSticky ? accessoryOffset : barHeight;
+    return {
+      opacity: distance > 0 ? interpolate(scrollY.value, [0, distance], [0, 1], "clamp") : isSticky ? 1 : 0
+    };
+  });
+  const compactTitleStyle = useAnimatedStyle(() => {
+    const progress = hidden.value ? 1 : barHeight > 0 ? interpolate(scrollY.value, [0, barHeight], [0, 1], "clamp") : 0;
+    return {
+      opacity: progress,
+      transform: [{
+        translateY: (1 - progress) * 8
+      }]
+    };
+  });
+  const largeTitleStyle = useAnimatedStyle(() => {
+    const progress = barHeight > 0 ? interpolate(scrollY.value, [0, barHeight], [0, 1], "clamp") : 0;
+    return {
+      opacity: 1 - progress,
+      transform: [{
+        translateY: -progress * 6
+      }]
+    };
+  });
+  return {
+    isSticky,
+    accessoryOffset,
+    reservedAccessoryHeight,
+    setAccessoryHeight,
+    setLargeTitleHeight,
+    accessoryStyle,
+    surfaceStyle,
+    compactTitleStyle,
+    largeTitleStyle
+  };
+}
+//# sourceMappingURL=use-large-title-header.js.map

package/lib/module/components/header/hooks/use-large-title-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useLayoutEffect","useState","interpolate","useAnimatedStyle","useSharedValue","useUnistyles","useScreen","useLargeTitleHeader","hasAccessory","accessoryBehavior","isLargeTitleHidden","theme","scrollY","contentTopPadding","setHeaderAccessoryHeight","accessoryHeight","setAccessoryHeight","largeTitleHeight","setLargeTitleHeight","hidden","value","barHeight","layout","header","height","isSticky","reservedAccessoryHeight","Math","max","round","spacing","accessoryOffset","accessoryStyle","transform","translateY","surfaceStyle","opacity","distance","compactTitleStyle","progress","largeTitleStyle"],"sourceRoot":"../../../../../src","sources":["components/header/hooks/use-large-title-header.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/header/parts/HeaderAccessory.js

@@ -1,32 +1,44 @@
 "use strict";
 
 import { View } from "react-native-unistyles/components/native/View";
-import { useCallback, useEffect } from "react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 import Animated from "react-native-reanimated";
 import { StyleSheet } from "react-native-unistyles";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { HeaderSurface } from "./HeaderSurface.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Measures accessory content so the header can reserve space in the scroll container. */
 export function HeaderAccessory({
   children,
   padding,
+  color,
+  surfaceStyle,
   onHeightChange,
   style
 }) {
+  const measuredHeight = useRef(0);
   const handleLayout = useCallback(event => {
-    onHeightChange(event.nativeEvent.layout.height);
+    measuredHeight.current = event.nativeEvent.layout.height;
+    onHeightChange?.(measuredHeight.current);
   }, [onHeightChange]);
 
   // Release the previous owner’s space when the callback changes or the accessory unmounts.
-  useEffect(() => () => onHeightChange(0), [onHeightChange]);
+  useLayoutEffect(() => {
+    onHeightChange?.(measuredHeight.current);
+    return () => onHeightChange?.(0);
+  }, [onHeightChange]);
   const _styles = styles;
   {
     const styles = _styles.useVariants({
       padding
     });
-    return /*#__PURE__*/_jsx(Animated.View, {
+    return /*#__PURE__*/_jsxs(Animated.View, {
       style: [styles.accessory, style],
       onLayout: handleLayout,
-      children: children
+      children: [/*#__PURE__*/_jsx(HeaderSurface, {
+        color: color,
+        animatedStyle: surfaceStyle,
+        accessory: true
+      }), children]
     });
   }
 }
@@ -41,6 +53,9 @@ export function HeaderAccessorySpacer({
 }
 const styles = StyleSheet.create(theme => ({
   accessory: {
+    // Static layout padding is intentional: the background must measure the full
+    // padded height even when a horizontal ScrollView is the accessory content.
+    paddingBottom: theme.spacing["2"],
     variants: {
       padding: {
         x: {

package/lib/module/components/header/parts/HeaderAccessory.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","Animated","StyleSheet","jsx","_jsx","HeaderAccessory","children","padding","onHeightChange","style","handleLayout","event","nativeEvent","layout","height","_styles","styles","useVariants","View","accessory","onLayout","HeaderAccessorySpacer","spacer","create","theme","variants","x","paddingHorizontal","screen","none","uni__dependencies"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderAccessory.tsx"],"mappings":";;;AAAA,SAAyBA,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAG9D,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,UAAU,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAcpD;AACA,OAAO,SAASC,eAAeA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,cAAc;EAAEC;AAA4B,CAAC,EAAE;EAClG,MAAMC,YAAY,GAAGX,WAAW,CAC7BY,KAAwB,IAAK;IAC5BH,cAAc,CAACG,KAAK,CAACC,WAAW,CAACC,MAAM,CAACC,MAAM,CAAC;EACjD,CAAC,EACD,CAACN,cAAc,CACjB,CAAC;;EAED;EACAR,SAAS,CAAC,MAAM,MAAMQ,cAAc,CAAC,CAAC,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAAC,MAAAO,OAAA,GAAAC,MAAA;EAAA;IAAA,MAAAA,MAAA,GAAAD,OAAA,CAAAE,WAAA,CAExC;MAAEV;IAAQ,CAAC;IAE9B,oBACEH,IAAA,CAACH,QAAQ,CAACiB,IAAI;MAACT,KAAK,EAAE,CAACO,MAAM,CAACG,SAAS,EAAEV,KAAK,CAAE;MAACW,QAAQ,EAAEV,YAAa;MAAAJ,QAAA,EACrEA;IAAQ,CACI,CAAC;EAChB;AACJ;;AAEA;AACA,OAAO,SAASe,qBAAqBA,CAAC;EAAEP;AAA2B,CAAC,EAAE;EACpE,oBAAOV,IAAA,CAACc,IAAI;IAACT,KAAK,EAAEO,MAAM,CAACM,MAAM,CAACR,MAAM;EAAE,CAAE,CAAC;AAC/C;AAEA,MAAME,MAAM,GAAGd,UAAU,CAACqB,MAAM,CAAEC,KAAK,KAAM;EAC3CL,SAAS,EAAE;IACTM,QAAQ,EAAE;MACRlB,OAAO,EAAE;QACPmB,CAAC,EAAE;UAAEC,iBAAiB,EAAEH,KAAK,CAACX,MAAM,CAACe,MAAM,CAACrB,OAAO,CAACmB;QAAE,CAAC;QACvDG,IAAI,EAAE,CAAC;MACT;IACF,CAAC;IAAAC,iBAAA;EACH,CAAC;EACDR,MAAM,EAAGR,MAAc,KAAM;IAAEA;EAAO,CAAC;AACzC,CAAC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useLayoutEffect","useRef","Animated","StyleSheet","HeaderSurface","jsx","_jsx","jsxs","_jsxs","HeaderAccessory","children","padding","color","surfaceStyle","onHeightChange","style","measuredHeight","handleLayout","event","current","nativeEvent","layout","height","_styles","styles","useVariants","View","accessory","onLayout","animatedStyle","HeaderAccessorySpacer","spacer","create","theme","paddingBottom","spacing","variants","x","paddingHorizontal","screen","none","uni__dependencies"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderAccessory.tsx"],"mappings":";;;AAAA,SAA8CA,WAAW,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAGjG,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,UAAU,QAAQ,wBAAwB;AAGnD,SAASC,aAAa;AAAmD,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAczE;AACA,OAAO,SAASC,eAAeA,CAAC;EAC9BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,YAAY;EACZC,cAAc;EACdC;AACoB,CAAC,EAAE;EACvB,MAAMC,cAAc,GAAGf,MAAM,CAAC,CAAC,CAAC;EAChC,MAAMgB,YAAY,GAAGlB,WAAW,CAC7BmB,KAAwB,IAAK;IAC5BF,cAAc,CAACG,OAAO,GAAGD,KAAK,CAACE,WAAW,CAACC,MAAM,CAACC,MAAM;IACxDR,cAAc,GAAGE,cAAc,CAACG,OAAO,CAAC;EAC1C,CAAC,EACD,CAACL,cAAc,CACjB,CAAC;;EAED;EACAd,eAAe,CAAC,MAAM;IACpBc,cAAc,GAAGE,cAAc,CAACG,OAAO,CAAC;IACxC,OAAO,MAAML,cAAc,GAAG,CAAC,CAAC;EAClC,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAAC,MAAAS,OAAA,GAAAC,MAAA;EAAA;IAAA,MAAAA,MAAA,GAAAD,OAAA,CAAAE,WAAA,CAEF;MAAEd;IAAQ,CAAC;IAE9B,oBACEH,KAAA,CAACN,QAAQ,CAACwB,IAAI;MAACX,KAAK,EAAE,CAACS,MAAM,CAACG,SAAS,EAAEZ,KAAK,CAAE;MAACa,QAAQ,EAAEX,YAAa;MAAAP,QAAA,gBACtEJ,IAAA,CAACF,aAAa;QAACQ,KAAK,EAAEA,KAAM;QAACiB,aAAa,EAAEhB,YAAa;QAACc,SAAS;MAAA,CAAE,CAAC,EACrEjB,QAAQ;IAAA,CACI,CAAC;EAChB;AACJ;;AAEA;AACA,OAAO,SAASoB,qBAAqBA,CAAC;EAAER;AAA2B,CAAC,EAAE;EACpE,oBAAOhB,IAAA,CAACoB,IAAI;IAACX,KAAK,EAAES,MAAM,CAACO,MAAM,CAACT,MAAM;EAAE,CAAE,CAAC;AAC/C;AAEA,MAAME,MAAM,GAAGrB,UAAU,CAAC6B,MAAM,CAAEC,KAAK,KAAM;EAC3CN,SAAS,EAAE;IACT;IACA;IACAO,aAAa,EAAED,KAAK,CAACE,OAAO,CAAC,GAAG,CAAC;IACjCC,QAAQ,EAAE;MACRzB,OAAO,EAAE;QACP0B,CAAC,EAAE;UAAEC,iBAAiB,EAAEL,KAAK,CAACZ,MAAM,CAACkB,MAAM,CAAC5B,OAAO,CAAC0B;QAAE,CAAC;QACvDG,IAAI,EAAE,CAAC;MACT;IACF,CAAC;IAAAC,iBAAA;EACH,CAAC;EACDV,MAAM,EAAGT,MAAc,KAAM;IAAEA;EAAO,CAAC;AACzC,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/header/parts/HeaderBar.js

@@ -0,0 +1,122 @@
+"use strict";
+
+import { View } from "react-native-unistyles/components/native/View";
+import { Text } from "react-native-unistyles/components/native/Text";
+import Animated from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { FONT_WEIGHT_VALUE } from "../../../utils/typography.js";
+import { Toolbar } from "../../toolbar/index.js";
+import { HeaderDismissButton } from "../header-buttons.js";
+import { isCustomTitle, isTextTitle } from "../utils.js";
+import { HeaderSurface } from "./HeaderSurface.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Shared compact bar. Only the title and background animate; actions stay interactive. */
+export function HeaderBar({
+  title,
+  leading,
+  trailing,
+  titleAlignment,
+  color,
+  surfaceStyle,
+  titleStyle,
+  dismissAction = "none",
+  navigation,
+  onDismiss
+}) {
+  const {
+    theme
+  } = useUnistyles();
+  const _styles = styles;
+  {
+    const styles = _styles.useVariants({
+      titleAlignment
+    });
+    const dismiss = /*#__PURE__*/_jsx(HeaderDismissButton, {
+      dismissAction: dismissAction,
+      navigation: navigation,
+      onDismiss: onDismiss
+    });
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.bar,
+      children: [/*#__PURE__*/_jsx(HeaderSurface, {
+        color: color,
+        animatedStyle: surfaceStyle
+      }), (leading != null || dismissAction === "back") && /*#__PURE__*/_jsxs(Toolbar, {
+        children: [dismissAction === "back" && dismiss, leading]
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.titleContainer, titleStyle],
+        pointerEvents: isCustomTitle(title) ? "box-none" : "none",
+        children: isTextTitle(title) ? String(title).trim().length > 0 && /*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          maxFontSizeMultiplier: theme.typography.variants["title-md"].maxFontSizeMultiplier,
+          children: title
+        }) : title
+      }), (trailing != null || dismissAction === "close") && /*#__PURE__*/_jsxs(Toolbar, {
+        style: styles.trailing,
+        children: [dismissAction === "close" && dismiss, trailing]
+      })]
+    });
+  }
+}
+const styles = StyleSheet.create(theme => ({
+  bar: {
+    height: theme.layout.header.height,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: theme.layout.screen.padding.x,
+    gap: theme.spacing["3"],
+    justifyContent: "space-between",
+    uni__dependencies: [0]
+  },
+  // A centered title is absolutely positioned, so it leaves the flex row. With
+  // no leading slot the trailing toolbar would be the only in-flow child and
+  // `space-between` would park it on the left — the auto margin pins it right.
+  trailing: {
+    justifyContent: "flex-end",
+    variants: {
+      titleAlignment: {
+        center: {
+          marginLeft: "auto"
+        },
+        left: {}
+      }
+    },
+    uni__dependencies: [4]
+  },
+  titleContainer: {
+    variants: {
+      titleAlignment: {
+        center: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          alignItems: "center"
+        },
+        left: {
+          flex: 1,
+          alignItems: "flex-start"
+        }
+      }
+    },
+    uni__dependencies: [4]
+  },
+  title: {
+    fontSize: theme.typography.variants["title-md"].fontSize,
+    lineHeight: theme.typography.variants["title-md"].lineHeight,
+    letterSpacing: theme.typography.variants["title-md"].letterSpacing,
+    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["title-md"].fontWeight],
+    color: theme.color["text.primary"] ?? "",
+    variants: {
+      titleAlignment: {
+        center: {
+          textAlign: "center"
+        },
+        left: {
+          textAlign: "left"
+        }
+      }
+    },
+    uni__dependencies: [0, 4]
+  }
+}));
+//# sourceMappingURL=HeaderBar.js.map

package/lib/module/components/header/parts/HeaderBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Animated","StyleSheet","useUnistyles","FONT_WEIGHT_VALUE","Toolbar","HeaderDismissButton","isCustomTitle","isTextTitle","HeaderSurface","jsx","_jsx","jsxs","_jsxs","HeaderBar","title","leading","trailing","titleAlignment","color","surfaceStyle","titleStyle","dismissAction","navigation","onDismiss","theme","_styles","styles","useVariants","dismiss","View","style","bar","children","animatedStyle","titleContainer","pointerEvents","String","trim","length","Text","maxFontSizeMultiplier","typography","variants","create","height","layout","header","flexDirection","alignItems","paddingHorizontal","screen","padding","x","gap","spacing","justifyContent","uni__dependencies","center","marginLeft","left","position","right","flex","fontSize","lineHeight","letterSpacing","fontWeight","textAlign"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/header/parts/HeaderGradientOverlay.js

@@ -4,100 +4,44 @@ import { useId } from "react";
 import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "react-native-svg";
 
 /**
- * How far the overlay extends below the bar's bottom edge, in dp.
- *
- * The fade needs more room than the bar alone can give it: confined to the bar,
- * the curve has to be steep enough to read as a band. Overhanging lets the tail
- * finish in open space, so the header releases content instead of cutting it.
+ * Opacity at the overlay's bottom edge. The top is fully opaque, so the header
+ * thins slightly toward the boundary rather than cutting content off square —
+ * but never far enough to read as see-through.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const HEADER_FADE_EXTENT = 8;
-
-/**
- * Where the fade begins, as a fraction of the overlay's height — the bar plus
- * {@link HEADER_FADE_EXTENT}.
- *
- * Sits inside the bar rather than at its bottom edge, so the tint has already
- * begun thinning before content reaches the boundary. That is the trade this
- * value makes: a longer, gentler ramp, paid for with content being faintly
- * visible through the lower part of the bar.
- */
-const FADE_START = 0.5;
-
-/**
- * Stops used to approximate the fade curve. Below ~10 the ramp shows as a series
- * of bands on an 8-bit display; above ~14 the extra stops cost SVG parse time
- * with nothing visible in return.
- */
-const FADE_STOPS = 4;
-
-/** Ceiling on the fade's opacity — see {@link alphaAt}. */
-const MAX_FADE_ALPHA = 0.65;
-
+export const HEADER_FADE_END_OPACITY = 0.85;
 /**
- * Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
- * bottom.
+ * Vertical fade behind header content, shared by header variants.
  *
- * The curve's slope is zero at both ends, so neither the start of the fade nor
- * its finish leaves a seam. A two-stop linear ramp has a constant slope that
- * begins and ends abruptly, and those two hard edges are what read as a line
- * drawn across the content rather than the header letting go of it.
- *
- * The cap holds the ramp just short of solid, so the whole overlay reads as one
- * continuous gradient rather than an opaque plateau with a curve bolted on.
- */
-const alphaAt = t => (1 + Math.cos(Math.PI * t) * MAX_FADE_ALPHA) / 2;
-
-/**
- * Every input is a module constant, so the ramp is built once at load rather
- * than rebuilt per render.
- *
- * The leading stop belongs to this list rather than being a sibling element:
- * `LinearGradient` types its children as a flat `ReactElement[]`, so an element
- * beside a mapped array would nest and fail to type-check.
- */
-const STOPS = [{
-  offset: 0,
-  opacity: 1
-}, ...Array.from({
-  length: FADE_STOPS
-}, (_, index) => {
-  const t = index / (FADE_STOPS - 1);
-  const offset = FADE_START + t * (1 - FADE_START);
-  return {
-    offset,
-    opacity: offset === 1 ? 0 : alphaAt(t)
-  };
-})];
-/**
- * Vertical fade-out overlay behind header content, shared by header variants.
- *
- * Reaches zero rather than stopping short. An overlay ending at partial opacity
- * leaves a hard step wherever it is clipped, and that step is far more visible
- * than the fade it was meant to hide — it is what cuts content off square as it
- * scrolls under the header.
- *
- * Callers size it to overhang the bar by {@link HEADER_FADE_EXTENT}.
+ * A two-stop linear ramp spanning the overlay's own box: it neither overhangs
+ * the surface nor reserves a band inside it, so callers size the surface and
+ * the ramp simply spans whatever they gave it.
  */
 export function HeaderGradientOverlay({
-  color
+  color,
+  startOpacity = 1,
+  endOpacity = HEADER_FADE_END_OPACITY
 }) {
   const gradientId = useId();
   return /*#__PURE__*/_jsxs(Svg, {
     height: "100%",
     width: "100%",
     children: [/*#__PURE__*/_jsx(Defs, {
-      children: /*#__PURE__*/_jsx(SvgLinearGradient, {
+      children: /*#__PURE__*/_jsxs(SvgLinearGradient, {
         id: gradientId,
         x1: "0",
         y1: "0",
         x2: "0",
         y2: "1",
-        children: STOPS.map(stop => /*#__PURE__*/_jsx(Stop, {
-          offset: stop.offset,
+        children: [/*#__PURE__*/_jsx(Stop, {
+          offset: 0,
+          stopColor: color,
+          stopOpacity: startOpacity
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: 1,
           stopColor: color,
-          stopOpacity: stop.opacity
-        }, stop.offset))
+          stopOpacity: endOpacity
+        })]
       })
     }), /*#__PURE__*/_jsx(Rect, {
       width: "100%",

package/lib/module/components/header/parts/HeaderGradientOverlay.js.map

@@ -1 +1 @@
-{"version":3,"names":["useId","Svg","Defs","Rect","Stop","LinearGradient","SvgLinearGradient","jsx","_jsx","jsxs","_jsxs","HEADER_FADE_EXTENT","FADE_START","FADE_STOPS","MAX_FADE_ALPHA","alphaAt","t","Math","cos","PI","STOPS","offset","opacity","Array","from","length","_","index","HeaderGradientOverlay","color","gradientId","height","width","children","id","x1","y1","x2","y2","map","stop","stopColor","stopOpacity","fill"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderGradientOverlay.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,OAAO;AAE7B,OAAOC,GAAG,IAAIC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,cAAc,IAAIC,iBAAiB,QAAQ,kBAAkB;;AAE7F;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG,GAAG;;AAEtB;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG,CAAC;;AAEpB;AACA,MAAMC,cAAc,GAAG,IAAI;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAIC,CAAS,IAAK,CAAC,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,EAAE,GAAGH,CAAC,CAAC,GAAGF,cAAc,IAAI,CAAC;;AAE/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,KAAK,GAAG,CACZ;EAAEC,MAAM,EAAE,CAAC;EAAEC,OAAO,EAAE;AAAE,CAAC,EACzB,GAAGC,KAAK,CAACC,IAAI,CAAC;EAAEC,MAAM,EAAEZ;AAAW,CAAC,EAAE,CAACa,CAAC,EAAEC,KAAK,KAAK;EAClD,MAAMX,CAAC,GAAGW,KAAK,IAAId,UAAU,GAAG,CAAC,CAAC;EAClC,MAAMQ,MAAM,GAAGT,UAAU,GAAGI,CAAC,IAAI,CAAC,GAAGJ,UAAU,CAAC;EAChD,OAAO;IAAES,MAAM;IAAEC,OAAO,EAAED,MAAM,KAAK,CAAC,GAAG,CAAC,GAAGN,OAAO,CAACC,CAAC;EAAE,CAAC;AAC3D,CAAC,CAAC,CACH;AAOD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASY,qBAAqBA,CAAC;EAAEC;AAAkC,CAAC,EAAE;EAC3E,MAAMC,UAAU,GAAG9B,KAAK,CAAC,CAAC;EAE1B,oBACEU,KAAA,CAACT,GAAG;IAAC8B,MAAM,EAAC,MAAM;IAACC,KAAK,EAAC,MAAM;IAAAC,QAAA,gBAC7BzB,IAAA,CAACN,IAAI;MAAA+B,QAAA,eACHzB,IAAA,CAACF,iBAAiB;QAAC4B,EAAE,EAAEJ,UAAW;QAACK,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAAAL,QAAA,EAC3Db,KAAK,CAACmB,GAAG,CAAEC,IAAI,iBACdhC,IAAA,CAACJ,IAAI;UAAmBiB,MAAM,EAAEmB,IAAI,CAACnB,MAAO;UAACoB,SAAS,EAAEZ,KAAM;UAACa,WAAW,EAAEF,IAAI,CAAClB;QAAQ,GAA9EkB,IAAI,CAACnB,MAA2E,CAC5F;MAAC,CACe;IAAC,CAChB,CAAC,eACPb,IAAA,CAACL,IAAI;MAAC6B,KAAK,EAAC,MAAM;MAACD,MAAM,EAAC,MAAM;MAACY,IAAI,EAAE,QAAQb,UAAU;IAAI,CAAE,CAAC;EAAA,CAC7D,CAAC;AAEV","ignoreList":[]}
+{"version":3,"names":["useId","Svg","Defs","Rect","Stop","LinearGradient","SvgLinearGradient","jsx","_jsx","jsxs","_jsxs","HEADER_FADE_END_OPACITY","HeaderGradientOverlay","color","startOpacity","endOpacity","gradientId","height","width","children","id","x1","y1","x2","y2","offset","stopColor","stopOpacity","fill"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderGradientOverlay.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,OAAO;AAE7B,OAAOC,GAAG,IAAIC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,cAAc,IAAIC,iBAAiB,QAAQ,kBAAkB;;AAE7F;AACA;AACA;AACA;AACA;AAJA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKA,OAAO,MAAMC,uBAAuB,GAAG,IAAI;AAS3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAC;EACpCC,KAAK;EACLC,YAAY,GAAG,CAAC;EAChBC,UAAU,GAAGJ;AACa,CAAC,EAAE;EAC7B,MAAMK,UAAU,GAAGhB,KAAK,CAAC,CAAC;EAE1B,oBACEU,KAAA,CAACT,GAAG;IAACgB,MAAM,EAAC,MAAM;IAACC,KAAK,EAAC,MAAM;IAAAC,QAAA,gBAC7BX,IAAA,CAACN,IAAI;MAAAiB,QAAA,eACHT,KAAA,CAACJ,iBAAiB;QAACc,EAAE,EAAEJ,UAAW;QAACK,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAAAL,QAAA,gBAC5DX,IAAA,CAACJ,IAAI;UAACqB,MAAM,EAAE,CAAE;UAACC,SAAS,EAAEb,KAAM;UAACc,WAAW,EAAEb;QAAa,CAAE,CAAC,eAChEN,IAAA,CAACJ,IAAI;UAACqB,MAAM,EAAE,CAAE;UAACC,SAAS,EAAEb,KAAM;UAACc,WAAW,EAAEZ;QAAW,CAAE,CAAC;MAAA,CAC7C;IAAC,CAChB,CAAC,eACPP,IAAA,CAACL,IAAI;MAACe,KAAK,EAAC,MAAM;MAACD,MAAM,EAAC,MAAM;MAACW,IAAI,EAAE,QAAQZ,UAAU;IAAI,CAAE,CAAC;EAAA,CAC7D,CAAC;AAEV","ignoreList":[]}