react-native-terra-ui 0.7.0 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.7.2](https://github.com/earthlin9/react-native-terra-ui/compare/v0.7.1...v0.7.2) (2026-09-06)
+
+### Bug Fixes
+
+* **ui:** [header] soften the scroll-edge fade further ([643dde0](https://github.com/earthlin9/react-native-terra-ui/commit/643dde0b636165ea6c01c5fb653aeea810df3ab9))
+
+## [0.7.1](https://github.com/earthlin9/react-native-terra-ui/compare/v0.7.0...v0.7.1) (2026-09-06)
+
+### Bug Fixes
+
+* **ui:** [header] lighten the scroll-edge fade ([b734f52](https://github.com/earthlin9/react-native-terra-ui/commit/b734f52df15454287edff977ddd9bad71e857a88))
+
 ## [0.7.0](https://github.com/earthlin9/react-native-terra-ui/compare/v0.6.0...v0.7.0) (2026-09-06)
 
 ### ⚠ BREAKING CHANGES

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

@@ -11,7 +11,7 @@ import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "reac
  * finish in open space, so the header releases content instead of cutting it.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const HEADER_FADE_EXTENT = 22;
+export const HEADER_FADE_EXTENT = 8;
 
 /**
  * Where the fade begins, as a fraction of the overlay's height — the bar plus
@@ -22,17 +22,17 @@ export const HEADER_FADE_EXTENT = 22;
  * value makes: a longer, gentler ramp, paid for with content being faintly
  * visible through the lower part of the bar.
  */
-const FADE_START = 0.45;
+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 = 12;
+const FADE_STOPS = 4;
 
 /** Ceiling on the fade's opacity — see {@link alphaAt}. */
-const MAX_FADE_ALPHA = 0.95;
+const MAX_FADE_ALPHA = 0.65;
 
 /**
  * Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
@@ -46,7 +46,7 @@ const MAX_FADE_ALPHA = 0.95;
  * 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 => Math.min((1 + Math.cos(Math.PI * t)) / 2, MAX_FADE_ALPHA);
+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
@@ -63,9 +63,10 @@ const STOPS = [{
   length: FADE_STOPS
 }, (_, index) => {
   const t = index / (FADE_STOPS - 1);
+  const offset = FADE_START + t * (1 - FADE_START);
   return {
-    offset: FADE_START + t * (1 - FADE_START),
-    opacity: alphaAt(t)
+    offset,
+    opacity: offset === 1 ? 0 : alphaAt(t)
   };
 })];
 /**

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","min","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,EAAE;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG,IAAI;;AAEvB;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG,EAAE;;AAErB;AACA,MAAMC,cAAc,GAAG,IAAI;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,OAAO,GAAIC,CAAS,IAAKC,IAAI,CAACC,GAAG,CAAC,CAAC,CAAC,GAAGD,IAAI,CAACE,GAAG,CAACF,IAAI,CAACG,EAAE,GAAGJ,CAAC,CAAC,IAAI,CAAC,EAAEF,cAAc,CAAC;;AAExF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMO,KAAK,GAAG,CACZ;EAAEC,MAAM,EAAE,CAAC;EAAEC,OAAO,EAAE;AAAE,CAAC,EACzB,GAAGC,KAAK,CAACC,IAAI,CAAC;EAAEC,MAAM,EAAEb;AAAW,CAAC,EAAE,CAACc,CAAC,EAAEC,KAAK,KAAK;EAClD,MAAMZ,CAAC,GAAGY,KAAK,IAAIf,UAAU,GAAG,CAAC,CAAC;EAClC,OAAO;IAAES,MAAM,EAAEV,UAAU,GAAGI,CAAC,IAAI,CAAC,GAAGJ,UAAU,CAAC;IAAEW,OAAO,EAAER,OAAO,CAACC,CAAC;EAAE,CAAC;AAC3E,CAAC,CAAC,CACH;AAOD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASa,qBAAqBA,CAAC;EAAEC;AAAkC,CAAC,EAAE;EAC3E,MAAMC,UAAU,GAAG/B,KAAK,CAAC,CAAC;EAE1B,oBACEU,KAAA,CAACT,GAAG;IAAC+B,MAAM,EAAC,MAAM;IAACC,KAAK,EAAC,MAAM;IAAAC,QAAA,gBAC7B1B,IAAA,CAACN,IAAI;MAAAgC,QAAA,eACH1B,IAAA,CAACF,iBAAiB;QAAC6B,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,iBACdjC,IAAA,CAACJ,IAAI;UAAmBkB,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,eACPd,IAAA,CAACL,IAAI;MAAC8B,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_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":[]}

package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts

@@ -5,7 +5,7 @@
  * 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.
  */
-export declare const HEADER_FADE_EXTENT = 22;
+export declare const HEADER_FADE_EXTENT = 8;
 export interface HeaderGradientOverlayProps {
     /** Fill color, fading to fully transparent along the overlay. */
     color: string;

package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderGradientOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderGradientOverlay.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAqDrC,MAAM,WAAW,0BAA0B;IACzC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,EAAE,0BAA0B,+BAe1E"}
+{"version":3,"file":"HeaderGradientOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderGradientOverlay.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAsDpC,MAAM,WAAW,0BAA0B;IACzC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,EAAE,0BAA0B,+BAe1E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Themeable React Native UI components built on react-native-unistyles",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/header/parts/HeaderGradientOverlay.tsx

@@ -9,7 +9,7 @@ import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "reac
  * 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.
  */
-export const HEADER_FADE_EXTENT = 22;
+export const HEADER_FADE_EXTENT = 8;
 
 /**
  * Where the fade begins, as a fraction of the overlay's height — the bar plus
@@ -20,17 +20,17 @@ export const HEADER_FADE_EXTENT = 22;
  * value makes: a longer, gentler ramp, paid for with content being faintly
  * visible through the lower part of the bar.
  */
-const FADE_START = 0.45;
+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 = 12;
+const FADE_STOPS = 4;
 
 /** Ceiling on the fade's opacity — see {@link alphaAt}. */
-const MAX_FADE_ALPHA = 0.95;
+const MAX_FADE_ALPHA = 0.65;
 
 /**
  * Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
@@ -44,7 +44,7 @@ const MAX_FADE_ALPHA = 0.95;
  * 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: number) => Math.min((1 + Math.cos(Math.PI * t)) / 2, MAX_FADE_ALPHA);
+const alphaAt = (t: number) => (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
@@ -58,7 +58,8 @@ const STOPS = [
   { offset: 0, opacity: 1 },
   ...Array.from({ length: FADE_STOPS }, (_, index) => {
     const t = index / (FADE_STOPS - 1);
-    return { offset: FADE_START + t * (1 - FADE_START), opacity: alphaAt(t) };
+    const offset = FADE_START + t * (1 - FADE_START);
+    return { offset, opacity: offset === 1 ? 0 : alphaAt(t) };
   }),
 ];