react-native-terra-ui 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +61 -0
- package/lib/module/components/header/parts/HeaderGradientOverlay.js +80 -10
- package/lib/module/components/header/parts/HeaderGradientOverlay.js.map +1 -1
- package/lib/module/components/header/variants/LargeTitleHeader/index.js +8 -4
- package/lib/module/components/header/variants/LargeTitleHeader/index.js.map +1 -1
- package/lib/module/components/header/variants/TitleHeader/index.js +7 -3
- package/lib/module/components/header/variants/TitleHeader/index.js.map +1 -1
- package/lib/module/components/toolbar/Toolbar.js +78 -8
- package/lib/module/components/toolbar/Toolbar.js.map +1 -1
- package/lib/module/theme/tokens/dark.js +4 -4
- package/lib/module/theme/tokens/dark.js.map +1 -1
- package/lib/module/theme/tokens/light.js +1 -1
- package/lib/module/theme/tokens/primitives.js +2 -2
- package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts +19 -2
- package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts.map +1 -1
- package/lib/typescript/src/components/header/variants/LargeTitleHeader/index.d.ts.map +1 -1
- package/lib/typescript/src/components/header/variants/TitleHeader/index.d.ts.map +1 -1
- package/lib/typescript/src/components/toolbar/Toolbar.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/header/parts/HeaderGradientOverlay.tsx +74 -4
- package/src/components/header/variants/LargeTitleHeader/index.tsx +8 -7
- package/src/components/header/variants/TitleHeader/index.tsx +7 -3
- package/src/components/toolbar/Toolbar.tsx +75 -11
- package/src/theme/tokens/dark.ts +4 -4
- package/src/theme/tokens/light.ts +1 -1
- package/src/theme/tokens/primitives.ts +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,66 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.7.0](https://github.com/earthlin9/react-native-terra-ui/compare/v0.6.0...v0.7.0) (2026-09-06)
|
|
4
|
+
|
|
5
|
+
### ⚠ BREAKING CHANGES
|
|
6
|
+
|
|
7
|
+
* **ui:** Header.Title and Header.LargeTitle now paint
|
|
8
|
+
`color.background` rather than `color.surface.default` by default. Pass
|
|
9
|
+
`bg="surface.default"` to keep the previous appearance.
|
|
10
|
+
|
|
11
|
+
* fix(ui): [toolbar] give a filled grouped cell its footprint back
|
|
12
|
+
|
|
13
|
+
A grouped cell gives up its own width and padding, collapsing to exactly
|
|
14
|
+
its content. That is invisible while the cell is transparent — the normal
|
|
15
|
+
case, where the capsule's gap does the spacing — but an explicit
|
|
16
|
+
`background` then painted a 20×42 box with a full radius, so the fill read
|
|
17
|
+
as a tall lozenge rather than a circle, and its curve ran into the
|
|
18
|
+
capsule's rounded end caps.
|
|
19
|
+
|
|
20
|
+
Adds a `filled` variant, active only inside a group, that takes the
|
|
21
|
+
footprint back: a square 4dp smaller per edge than the item size, or that
|
|
22
|
+
height with its horizontal padding restored when the item has a label. The
|
|
23
|
+
inset is what keeps the fill's curve clear of the capsule's own.
|
|
24
|
+
|
|
25
|
+
Standalone items are untouched — they already own their footprint, so a
|
|
26
|
+
background there changes nothing but paint.
|
|
27
|
+
|
|
28
|
+
* refactor(showcase): [toolbar] back the floating demo with Surface
|
|
29
|
+
|
|
30
|
+
Swaps the hand-rolled Box + surface.sunken backdrop for Surface's base
|
|
31
|
+
variant, so the demo picks up the configured surface radius and elevation
|
|
32
|
+
instead of restating them.
|
|
33
|
+
* **ui:** Toolbar.Button cells are now 42×42 rather than 40×40, so
|
|
34
|
+
headers and any layout measured against the old size grow by 2dp.
|
|
35
|
+
|
|
36
|
+
* feat(theme): retune dark surfaces and soften the shadow colour
|
|
37
|
+
|
|
38
|
+
Darkens and cools the dark scheme's surfaces — background, surface.default,
|
|
39
|
+
raised and sunken — replacing the neutral-800 alias on raised with an
|
|
40
|
+
explicit value so the three steps read as a deliberate ramp rather than one
|
|
41
|
+
palette borrow among literals.
|
|
42
|
+
|
|
43
|
+
Also moves the light scheme's shadow off pure black to [#1b1b1b](https://github.com/earthlin9/react-native-terra-ui/issues/1b1b1b) and nudges
|
|
44
|
+
elevation.xs opacity to 0.06, so the toolbar capsule and standalone header
|
|
45
|
+
buttons cast a softer, less grey-looking shadow.
|
|
46
|
+
|
|
47
|
+
* feat(ui)!: [header] default the bar to the page background token
|
|
48
|
+
|
|
49
|
+
Both variants defaulted `bg` to `surface.default`, which paints the bar a
|
|
50
|
+
different colour from the page it sits over. Defaulting to `background`
|
|
51
|
+
makes the header read as part of the page until it collapses.
|
|
52
|
+
|
|
53
|
+
Drops LargeTitleHeader's hand-rolled surface.default fallback with it: the
|
|
54
|
+
token always resolves, so the extra lookup only masked a missing one.
|
|
55
|
+
|
|
56
|
+
### Features
|
|
57
|
+
|
|
58
|
+
* **ui:** [toolbar] rework the showcase, fix filled grouped cells, sync the spec ([#14](https://github.com/earthlin9/react-native-terra-ui/issues/14)) ([8490d0f](https://github.com/earthlin9/react-native-terra-ui/commit/8490d0fdea4d0af198a0914ae3f5084af99fb257)), references [#1b1b1b](https://github.com/earthlin9/react-native-terra-ui/issues/1b1b1b)
|
|
59
|
+
|
|
60
|
+
### Bug Fixes
|
|
61
|
+
|
|
62
|
+
* **ui:** [header] soften the scroll edge where content passes under the bar ([#15](https://github.com/earthlin9/react-native-terra-ui/issues/15)) ([93143ee](https://github.com/earthlin9/react-native-terra-ui/commit/93143ee3ee31ed93a61af4a0e20040d4f3dbfcc2))
|
|
63
|
+
|
|
3
64
|
## [0.6.0](https://github.com/earthlin9/react-native-terra-ui/compare/v0.5.1...v0.6.0) (2026-09-03)
|
|
4
65
|
|
|
5
66
|
### ⚠ BREAKING CHANGES
|
|
@@ -2,8 +2,82 @@
|
|
|
2
2
|
|
|
3
3
|
import { useId } from "react";
|
|
4
4
|
import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "react-native-svg";
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* How far the overlay extends below the bar's bottom edge, in dp.
|
|
8
|
+
*
|
|
9
|
+
* The fade needs more room than the bar alone can give it: confined to the bar,
|
|
10
|
+
* the curve has to be steep enough to read as a band. Overhanging lets the tail
|
|
11
|
+
* finish in open space, so the header releases content instead of cutting it.
|
|
12
|
+
*/
|
|
5
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
-
|
|
14
|
+
export const HEADER_FADE_EXTENT = 22;
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Where the fade begins, as a fraction of the overlay's height — the bar plus
|
|
18
|
+
* {@link HEADER_FADE_EXTENT}.
|
|
19
|
+
*
|
|
20
|
+
* Sits inside the bar rather than at its bottom edge, so the tint has already
|
|
21
|
+
* begun thinning before content reaches the boundary. That is the trade this
|
|
22
|
+
* value makes: a longer, gentler ramp, paid for with content being faintly
|
|
23
|
+
* visible through the lower part of the bar.
|
|
24
|
+
*/
|
|
25
|
+
const FADE_START = 0.45;
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Stops used to approximate the fade curve. Below ~10 the ramp shows as a series
|
|
29
|
+
* of bands on an 8-bit display; above ~14 the extra stops cost SVG parse time
|
|
30
|
+
* with nothing visible in return.
|
|
31
|
+
*/
|
|
32
|
+
const FADE_STOPS = 12;
|
|
33
|
+
|
|
34
|
+
/** Ceiling on the fade's opacity — see {@link alphaAt}. */
|
|
35
|
+
const MAX_FADE_ALPHA = 0.95;
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
|
|
39
|
+
* bottom.
|
|
40
|
+
*
|
|
41
|
+
* The curve's slope is zero at both ends, so neither the start of the fade nor
|
|
42
|
+
* its finish leaves a seam. A two-stop linear ramp has a constant slope that
|
|
43
|
+
* begins and ends abruptly, and those two hard edges are what read as a line
|
|
44
|
+
* drawn across the content rather than the header letting go of it.
|
|
45
|
+
*
|
|
46
|
+
* The cap holds the ramp just short of solid, so the whole overlay reads as one
|
|
47
|
+
* continuous gradient rather than an opaque plateau with a curve bolted on.
|
|
48
|
+
*/
|
|
49
|
+
const alphaAt = t => Math.min((1 + Math.cos(Math.PI * t)) / 2, MAX_FADE_ALPHA);
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Every input is a module constant, so the ramp is built once at load rather
|
|
53
|
+
* than rebuilt per render.
|
|
54
|
+
*
|
|
55
|
+
* The leading stop belongs to this list rather than being a sibling element:
|
|
56
|
+
* `LinearGradient` types its children as a flat `ReactElement[]`, so an element
|
|
57
|
+
* beside a mapped array would nest and fail to type-check.
|
|
58
|
+
*/
|
|
59
|
+
const STOPS = [{
|
|
60
|
+
offset: 0,
|
|
61
|
+
opacity: 1
|
|
62
|
+
}, ...Array.from({
|
|
63
|
+
length: FADE_STOPS
|
|
64
|
+
}, (_, index) => {
|
|
65
|
+
const t = index / (FADE_STOPS - 1);
|
|
66
|
+
return {
|
|
67
|
+
offset: FADE_START + t * (1 - FADE_START),
|
|
68
|
+
opacity: alphaAt(t)
|
|
69
|
+
};
|
|
70
|
+
})];
|
|
71
|
+
/**
|
|
72
|
+
* Vertical fade-out overlay behind header content, shared by header variants.
|
|
73
|
+
*
|
|
74
|
+
* Reaches zero rather than stopping short. An overlay ending at partial opacity
|
|
75
|
+
* leaves a hard step wherever it is clipped, and that step is far more visible
|
|
76
|
+
* than the fade it was meant to hide — it is what cuts content off square as it
|
|
77
|
+
* scrolls under the header.
|
|
78
|
+
*
|
|
79
|
+
* Callers size it to overhang the bar by {@link HEADER_FADE_EXTENT}.
|
|
80
|
+
*/
|
|
7
81
|
export function HeaderGradientOverlay({
|
|
8
82
|
color
|
|
9
83
|
}) {
|
|
@@ -12,21 +86,17 @@ export function HeaderGradientOverlay({
|
|
|
12
86
|
height: "100%",
|
|
13
87
|
width: "100%",
|
|
14
88
|
children: [/*#__PURE__*/_jsx(Defs, {
|
|
15
|
-
children: /*#__PURE__*/
|
|
89
|
+
children: /*#__PURE__*/_jsx(SvgLinearGradient, {
|
|
16
90
|
id: gradientId,
|
|
17
91
|
x1: "0",
|
|
18
92
|
y1: "0",
|
|
19
93
|
x2: "0",
|
|
20
94
|
y2: "1",
|
|
21
|
-
children:
|
|
22
|
-
offset:
|
|
23
|
-
stopColor: color,
|
|
24
|
-
stopOpacity: "1"
|
|
25
|
-
}), /*#__PURE__*/_jsx(Stop, {
|
|
26
|
-
offset: "1",
|
|
95
|
+
children: STOPS.map(stop => /*#__PURE__*/_jsx(Stop, {
|
|
96
|
+
offset: stop.offset,
|
|
27
97
|
stopColor: color,
|
|
28
|
-
stopOpacity:
|
|
29
|
-
})
|
|
98
|
+
stopOpacity: stop.opacity
|
|
99
|
+
}, stop.offset))
|
|
30
100
|
})
|
|
31
101
|
}), /*#__PURE__*/_jsx(Rect, {
|
|
32
102
|
width: "100%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useId","Svg","Defs","Rect","Stop","LinearGradient","SvgLinearGradient","jsx","_jsx","jsxs","_jsxs","HeaderGradientOverlay","color","gradientId","height","width","children","id","x1","y1","x2","y2","
|
|
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":[]}
|
|
@@ -11,7 +11,7 @@ import { Portal } from "../../../portal/index.js";
|
|
|
11
11
|
import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "../../../screen/ScreenContext.js";
|
|
12
12
|
import { Toolbar } from "../../../toolbar/index.js";
|
|
13
13
|
import { HeaderDismissButton } from "../../header-buttons.js";
|
|
14
|
-
import { HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay.js";
|
|
14
|
+
import { HEADER_FADE_EXTENT, HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay.js";
|
|
15
15
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
16
16
|
const AnimatedText = Animated.createAnimatedComponent(Text);
|
|
17
17
|
|
|
@@ -104,12 +104,12 @@ export function LargeTitleHeader({
|
|
|
104
104
|
onDismiss,
|
|
105
105
|
titleAlignment = "center",
|
|
106
106
|
isLargeTitleHidden = false,
|
|
107
|
-
bg = "
|
|
107
|
+
bg = "background"
|
|
108
108
|
}) {
|
|
109
109
|
const {
|
|
110
110
|
theme
|
|
111
111
|
} = useUnistyles();
|
|
112
|
-
const bgColor = resolveThemeColor(bg, theme) ??
|
|
112
|
+
const bgColor = resolveThemeColor(bg, theme) ?? "";
|
|
113
113
|
const isTransparent = bgColor === "transparent";
|
|
114
114
|
const gradientColor = isTransparent ? theme.color.background : bgColor;
|
|
115
115
|
const {
|
|
@@ -232,12 +232,16 @@ const styles = StyleSheet.create((theme, runtime) => ({
|
|
|
232
232
|
backgroundColor: bgColor,
|
|
233
233
|
uni__dependencies: [9]
|
|
234
234
|
}),
|
|
235
|
+
// Overhangs the bar by `HEADER_FADE_EXTENT` so the fade has room to finish
|
|
236
|
+
// below it — confined to the bar, the curve would be steep enough to read as a
|
|
237
|
+
// band. Nothing on the path clips and the overlay is `pointerEvents="none"`,
|
|
238
|
+
// so the spill costs neither layout nor touches.
|
|
235
239
|
gradient: {
|
|
236
240
|
position: "absolute",
|
|
237
241
|
top: 0,
|
|
238
242
|
left: 0,
|
|
239
243
|
right: 0,
|
|
240
|
-
bottom:
|
|
244
|
+
bottom: -HEADER_FADE_EXTENT
|
|
241
245
|
},
|
|
242
246
|
bar: {
|
|
243
247
|
height: theme.layout.header.height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","Animated","interpolate","useAnimatedStyle","useSharedValue","StyleSheet","useUnistyles","resolveThemeColor","FONT_WEIGHT_VALUE","Portal","SCREEN_HEADER_PORTAL_HOST","useScreen","Toolbar","HeaderDismissButton","HeaderGradientOverlay","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","AnimatedText","createAnimatedComponent","Text","COMPACT_TITLE_SLIDE_OFFSET","LARGE_TITLE_SLIDE_OFFSET","LargeTitlePortalContent","title","overline","subtitle","titleAlignment","theme","scrollY","_styles","styles","useVariants","headerCollapseHeight","layout","header","height","largeTitleAnimatedStyle","opacity","transform","translateY","value","View","style","portalContent","children","maxFontSizeMultiplier","typography","variants","largeTitle","LargeTitleHeader","LeftToolbar","RightToolbar","dismissAction","navigation","onDismiss","isLargeTitleHidden","bg","bgColor","color","isTransparent","gradientColor","background","isLargeTitleHiddenValue","_styles2","gradientOpacityStyle","compactTitleAnimatedStyle","leading","trailing","container","hostName","safeArea","bar","gradient","pointerEvents","titleContainer","compactTitle","create","runtime","position","top","left","right","zIndex","insets","backgroundColor","uni__dependencies","bottom","flexDirection","alignItems","paddingHorizontal","screen","margin","x","gap","spacing","justifyContent","minHeight","paddingBottom","fontSize","lineHeight","letterSpacing","fontWeight","center","textAlign","flex"],"sourceRoot":"../../../../../../src","sources":["components/header/variants/LargeTitleHeader/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["useEffect","Animated","interpolate","useAnimatedStyle","useSharedValue","StyleSheet","useUnistyles","resolveThemeColor","FONT_WEIGHT_VALUE","Portal","SCREEN_HEADER_PORTAL_HOST","useScreen","Toolbar","HeaderDismissButton","HEADER_FADE_EXTENT","HeaderGradientOverlay","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","AnimatedText","createAnimatedComponent","Text","COMPACT_TITLE_SLIDE_OFFSET","LARGE_TITLE_SLIDE_OFFSET","LargeTitlePortalContent","title","overline","subtitle","titleAlignment","theme","scrollY","_styles","styles","useVariants","headerCollapseHeight","layout","header","height","largeTitleAnimatedStyle","opacity","transform","translateY","value","View","style","portalContent","children","maxFontSizeMultiplier","typography","variants","largeTitle","LargeTitleHeader","LeftToolbar","RightToolbar","dismissAction","navigation","onDismiss","isLargeTitleHidden","bg","bgColor","isTransparent","gradientColor","color","background","isLargeTitleHiddenValue","_styles2","gradientOpacityStyle","compactTitleAnimatedStyle","leading","trailing","container","hostName","safeArea","bar","gradient","pointerEvents","titleContainer","compactTitle","create","runtime","position","top","left","right","zIndex","insets","backgroundColor","uni__dependencies","bottom","flexDirection","alignItems","paddingHorizontal","screen","margin","x","gap","spacing","justifyContent","minHeight","paddingBottom","fontSize","lineHeight","letterSpacing","fontWeight","center","textAlign","flex"],"sourceRoot":"../../../../../../src","sources":["components/header/variants/LargeTitleHeader/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,7 +7,7 @@ import { resolveThemeColor } from "../../../../utils/resolve-theme-color.js";
|
|
|
7
7
|
import { FONT_WEIGHT_VALUE } from "../../../../utils/typography.js";
|
|
8
8
|
import { Toolbar } from "../../../toolbar/index.js";
|
|
9
9
|
import { HeaderDismissButton } from "../../header-buttons.js";
|
|
10
|
-
import { HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay.js";
|
|
10
|
+
import { HEADER_FADE_EXTENT, HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay.js";
|
|
11
11
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
12
|
/**
|
|
13
13
|
* Compact title bar (leading slot · title · trailing slot) with a top safe-area
|
|
@@ -34,7 +34,7 @@ export function TitleHeader({
|
|
|
34
34
|
navigation,
|
|
35
35
|
onDismiss,
|
|
36
36
|
titleAlignment = "center",
|
|
37
|
-
bg = "
|
|
37
|
+
bg = "background"
|
|
38
38
|
}) {
|
|
39
39
|
const {
|
|
40
40
|
theme
|
|
@@ -103,12 +103,16 @@ const styles = StyleSheet.create((theme, runtime) => ({
|
|
|
103
103
|
backgroundColor: isTransparent ? "transparent" : bgColor,
|
|
104
104
|
uni__dependencies: [9]
|
|
105
105
|
}),
|
|
106
|
+
// Overhangs the bar by `HEADER_FADE_EXTENT` so the fade has room to finish
|
|
107
|
+
// below it — confined to the bar, the curve would be steep enough to read as a
|
|
108
|
+
// band. Nothing on the path clips and the overlay is `pointerEvents="none"`,
|
|
109
|
+
// so the spill costs neither layout nor touches.
|
|
106
110
|
gradient: {
|
|
107
111
|
position: "absolute",
|
|
108
112
|
top: 0,
|
|
109
113
|
left: 0,
|
|
110
114
|
right: 0,
|
|
111
|
-
bottom:
|
|
115
|
+
bottom: -HEADER_FADE_EXTENT
|
|
112
116
|
},
|
|
113
117
|
bar: {
|
|
114
118
|
height: theme.layout.header.height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","useUnistyles","resolveThemeColor","FONT_WEIGHT_VALUE","Toolbar","HeaderDismissButton","HeaderGradientOverlay","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TitleHeader","title","LeftToolbar","RightToolbar","dismissAction","navigation","onDismiss","titleAlignment","bg","theme","bgColor","color","isTransparent","gradientColor","_styles","styles","useVariants","leading","children","trailing","View","style","container","safeArea","bar","gradient","pointerEvents","titleContainer","Text","create","runtime","position","top","left","right","zIndex","height","insets","backgroundColor","uni__dependencies","bottom","layout","header","flexDirection","alignItems","paddingHorizontal","screen","margin","x","gap","spacing","justifyContent","variants","center","flex","fontSize","typography","lineHeight","letterSpacing","fontWeight","textAlign"],"sourceRoot":"../../../../../../src","sources":["components/header/variants/TitleHeader/index.tsx"],"mappings":";;;;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,wBAAwB;AAGjE,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAC1B,SAASC,OAAO;AAChB,SAASC,mBAAmB;AAC5B,SAASC,qBAAqB;AAA4C,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;
|
|
1
|
+
{"version":3,"names":["StyleSheet","useUnistyles","resolveThemeColor","FONT_WEIGHT_VALUE","Toolbar","HeaderDismissButton","HEADER_FADE_EXTENT","HeaderGradientOverlay","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TitleHeader","title","LeftToolbar","RightToolbar","dismissAction","navigation","onDismiss","titleAlignment","bg","theme","bgColor","color","isTransparent","gradientColor","_styles","styles","useVariants","leading","children","trailing","View","style","container","safeArea","bar","gradient","pointerEvents","titleContainer","Text","create","runtime","position","top","left","right","zIndex","height","insets","backgroundColor","uni__dependencies","bottom","layout","header","flexDirection","alignItems","paddingHorizontal","screen","margin","x","gap","spacing","justifyContent","variants","center","flex","fontSize","typography","lineHeight","letterSpacing","fontWeight","textAlign"],"sourceRoot":"../../../../../../src","sources":["components/header/variants/TitleHeader/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -22,10 +22,43 @@ const ToolbarGroupContext = /*#__PURE__*/createContext({
|
|
|
22
22
|
isGrouped: false
|
|
23
23
|
});
|
|
24
24
|
|
|
25
|
-
/**
|
|
26
|
-
|
|
25
|
+
/**
|
|
26
|
+
* Square cell of an icon-only item, in dp. Just under Apple's 44pt minimum
|
|
27
|
+
* touch target; `HIT_SLOP` carries the cell past it.
|
|
28
|
+
*/
|
|
29
|
+
const ITEM_SIZE = 42;
|
|
30
|
+
|
|
31
|
+
/** Horizontal padding of an item that owns its footprint, in dp. */
|
|
32
|
+
const ITEM_PADDING = 10;
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* How far a filled cell is inset inside the capsule, per edge, in dp. A fill
|
|
36
|
+
* flush with the capsule's own height would collide with its rounded end caps;
|
|
37
|
+
* the inset keeps the two curves clear of one another.
|
|
38
|
+
*/
|
|
39
|
+
const FILLED_INSET = 4;
|
|
40
|
+
|
|
41
|
+
/** Cell of a grouped item that paints its own fill, in dp. */
|
|
42
|
+
const FILLED_ITEM_SIZE = ITEM_SIZE - FILLED_INSET * 2;
|
|
43
|
+
|
|
44
|
+
/** Horizontal padding inside the capsule's end caps, in dp. */
|
|
45
|
+
const CAPSULE_PADDING = 10;
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Item count from which a capsule takes {@link CAPSULE_PADDING_EXTRA}. A lone
|
|
49
|
+
* item sits in a capsule barely wider than itself and needs no extra room; from
|
|
50
|
+
* two up the run reads as a bar, and end caps sized for one look pinched.
|
|
51
|
+
*/
|
|
52
|
+
const CAPSULE_WIDE_ITEMS = 2;
|
|
53
|
+
|
|
54
|
+
/** Additional end-cap padding at {@link CAPSULE_WIDE_ITEMS} items or more, in dp. */
|
|
55
|
+
const CAPSULE_PADDING_EXTRA = 4;
|
|
27
56
|
|
|
28
|
-
/**
|
|
57
|
+
/**
|
|
58
|
+
* Touch expansion outside the cell, in dp — uniform on all four sides, grouped
|
|
59
|
+
* or not. Safe inside a capsule because its 20dp item gap exceeds two
|
|
60
|
+
* neighbouring 8dp expansions, so no item can steal a tap aimed at the next.
|
|
61
|
+
*/
|
|
29
62
|
const HIT_SLOP = 8;
|
|
30
63
|
|
|
31
64
|
/** Typographic role of a text item's label. */
|
|
@@ -72,11 +105,17 @@ export function ToolbarButton({
|
|
|
72
105
|
const fg = tint ?? groupTint;
|
|
73
106
|
const bg = background ?? groupBackground;
|
|
74
107
|
const shape = Children.count(children) > 0 ? "label" : "icon";
|
|
108
|
+
// A grouped cell normally shrinks to its glyph, which is invisible while it is
|
|
109
|
+
// transparent but shows as a lozenge the width of that glyph the moment the
|
|
110
|
+
// cell paints. An explicit `background` therefore has to buy the footprint
|
|
111
|
+
// back — see the `filled` variant.
|
|
112
|
+
const isFilled = isGrouped && background !== undefined;
|
|
75
113
|
const _styles = styles;
|
|
76
114
|
{
|
|
77
115
|
const styles = _styles.useVariants({
|
|
78
116
|
shape,
|
|
79
|
-
grouped: isGrouped
|
|
117
|
+
grouped: isGrouped,
|
|
118
|
+
filled: isFilled
|
|
80
119
|
});
|
|
81
120
|
// Read during render rather than inside the `style` callback below. The
|
|
82
121
|
// callback can run after sibling buttons have rendered, and `useVariants` is
|
|
@@ -154,11 +193,16 @@ export const ToolbarGroup = /*#__PURE__*/forwardRef(function ToolbarGroup({
|
|
|
154
193
|
tint,
|
|
155
194
|
isGrouped: true
|
|
156
195
|
}), [tint]);
|
|
196
|
+
|
|
197
|
+
// `Children.count` treats a fragment as a single child, so items wrapped in
|
|
198
|
+
// one keep the tighter padding. Walking the tree to flatten them would cost a
|
|
199
|
+
// traversal per render to settle 4dp, which is not a trade worth making.
|
|
200
|
+
const isCrowded = Children.count(children) >= CAPSULE_WIDE_ITEMS;
|
|
157
201
|
return /*#__PURE__*/_jsx(ToolbarGroupContext.Provider, {
|
|
158
202
|
value: context,
|
|
159
203
|
children: /*#__PURE__*/_jsx(View, {
|
|
160
204
|
ref: ref,
|
|
161
|
-
style: [styles.capsule(background), style],
|
|
205
|
+
style: [styles.capsule(background, isCrowded), style],
|
|
162
206
|
...rest,
|
|
163
207
|
children: children
|
|
164
208
|
})
|
|
@@ -213,11 +257,11 @@ const styles = StyleSheet.create(theme => ({
|
|
|
213
257
|
// `background` is an open `ColorToken` — it accepts raw literals, so it cannot
|
|
214
258
|
// be enumerated as a variant. Resolving inside the factory keeps the fill tied
|
|
215
259
|
// to the live theme.
|
|
216
|
-
capsule: background => ({
|
|
260
|
+
capsule: (background, isCrowded) => ({
|
|
217
261
|
flexDirection: "row",
|
|
218
262
|
alignItems: "center",
|
|
219
263
|
gap: theme.spacing["5"],
|
|
220
|
-
paddingHorizontal:
|
|
264
|
+
paddingHorizontal: CAPSULE_PADDING + (isCrowded ? CAPSULE_PADDING_EXTRA : 0),
|
|
221
265
|
borderRadius: theme.radius.full,
|
|
222
266
|
backgroundColor: resolveThemeColor(background, theme),
|
|
223
267
|
borderWidth: StyleSheet.hairlineWidth,
|
|
@@ -250,19 +294,45 @@ const styles = StyleSheet.create(theme => ({
|
|
|
250
294
|
},
|
|
251
295
|
false: {
|
|
252
296
|
minWidth: ITEM_SIZE,
|
|
253
|
-
paddingHorizontal:
|
|
297
|
+
paddingHorizontal: ITEM_PADDING,
|
|
254
298
|
borderWidth: StyleSheet.hairlineWidth,
|
|
255
299
|
borderColor: theme.color["border.subtle"],
|
|
256
300
|
...theme.elevation.xs
|
|
257
301
|
}
|
|
302
|
+
},
|
|
303
|
+
// Only meaningful inside a capsule: a standalone cell already owns its
|
|
304
|
+
// footprint, so painting it a different colour changes nothing but paint.
|
|
305
|
+
filled: {
|
|
306
|
+
true: {},
|
|
307
|
+
false: {}
|
|
258
308
|
}
|
|
259
309
|
},
|
|
260
310
|
compoundVariants: [{
|
|
261
311
|
shape: "icon",
|
|
262
312
|
grouped: true,
|
|
313
|
+
filled: false,
|
|
263
314
|
styles: {
|
|
264
315
|
width: undefined
|
|
265
316
|
}
|
|
317
|
+
},
|
|
318
|
+
// A filled cell takes its footprint back, inset from the capsule's height
|
|
319
|
+
// so its curve clears the capsule's own.
|
|
320
|
+
{
|
|
321
|
+
shape: "icon",
|
|
322
|
+
grouped: true,
|
|
323
|
+
filled: true,
|
|
324
|
+
styles: {
|
|
325
|
+
width: FILLED_ITEM_SIZE,
|
|
326
|
+
height: FILLED_ITEM_SIZE
|
|
327
|
+
}
|
|
328
|
+
}, {
|
|
329
|
+
shape: "label",
|
|
330
|
+
grouped: true,
|
|
331
|
+
filled: true,
|
|
332
|
+
styles: {
|
|
333
|
+
height: FILLED_ITEM_SIZE,
|
|
334
|
+
paddingHorizontal: ITEM_PADDING
|
|
335
|
+
}
|
|
266
336
|
}],
|
|
267
337
|
uni__dependencies: [0, 4]
|
|
268
338
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Children","createContext","forwardRef","useContext","useMemo","StyleSheet","resolveThemeColor","Icon","Text","jsx","_jsx","jsxs","_jsxs","ToolbarGroupContext","background","tint","isGrouped","ITEM_SIZE","HIT_SLOP","LABEL_VARIANT","ToolbarButton","icon","iconSize","children","accessibilityLabel","onPress","hitSlop","style","rest","groupBackground","groupTint","fg","bg","shape","count","_styles","styles","useVariants","grouped","cell","button","Pressable","accessibilityRole","state","fill","pressed","
|
|
1
|
+
{"version":3,"names":["Children","createContext","forwardRef","useContext","useMemo","StyleSheet","resolveThemeColor","Icon","Text","jsx","_jsx","jsxs","_jsxs","ToolbarGroupContext","background","tint","isGrouped","ITEM_SIZE","ITEM_PADDING","FILLED_INSET","FILLED_ITEM_SIZE","CAPSULE_PADDING","CAPSULE_WIDE_ITEMS","CAPSULE_PADDING_EXTRA","HIT_SLOP","LABEL_VARIANT","ToolbarButton","icon","iconSize","children","accessibilityLabel","onPress","hitSlop","style","rest","groupBackground","groupTint","fg","bg","shape","count","isFilled","undefined","_styles","styles","useVariants","grouped","filled","cell","button","Pressable","accessibilityRole","state","fill","pressed","size","color","name","renderLabel","map","child","trim","length","variant","weight","ToolbarGroup","ref","context","isCrowded","Provider","value","View","capsule","ToolbarRoot","Toolbar","gap","row","Group","Button","create","theme","flexDirection","alignItems","spacing","uni__dependencies","paddingHorizontal","borderRadius","radius","full","backgroundColor","borderWidth","hairlineWidth","borderColor","elevation","xs","height","justifyContent","variants","width","label","true","false","minWidth","compoundVariants","opacity"],"sourceRoot":"../../../../src","sources":["components/toolbar/Toolbar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
*/
|
|
10
10
|
export const dark = {
|
|
11
11
|
// ── color: page background ────────────────────────────────────────────────
|
|
12
|
-
"color.background": "#
|
|
12
|
+
"color.background": "#040506",
|
|
13
13
|
// ── color: shadow (used as elevation.*.shadowColor) ───────────────────────
|
|
14
14
|
"color.shadow": "#FFFFFF",
|
|
15
15
|
// ── color: surfaces (bg implied — no property segment) ──────────────────
|
|
16
|
-
"color.surface.default": "#
|
|
17
|
-
"color.surface.raised": "
|
|
18
|
-
"color.surface.sunken": "#
|
|
16
|
+
"color.surface.default": "#0C0F12",
|
|
17
|
+
"color.surface.raised": "#101418",
|
|
18
|
+
"color.surface.sunken": "#080A0C",
|
|
19
19
|
"color.surface.overlay": "rgba(0, 0, 0, 0.72)",
|
|
20
20
|
"color.surface.accent": "{palette.emerald.500}",
|
|
21
21
|
"color.surface.accent.subtle": "{palette.emerald.950}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["dark"],"sourceRoot":"../../../../src","sources":["theme/tokens/dark.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,IAAI,GAAG;EAClB;EACA,kBAAkB,EAAE,SAAS;EAE7B;EACA,cAAc,EAAE,SAAS;EAEzB;EACA,uBAAuB,EAAE,SAAS;EAClC,sBAAsB,EAAE,
|
|
1
|
+
{"version":3,"names":["dark"],"sourceRoot":"../../../../src","sources":["theme/tokens/dark.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,IAAI,GAAG;EAClB;EACA,kBAAkB,EAAE,SAAS;EAE7B;EACA,cAAc,EAAE,SAAS;EAEzB;EACA,uBAAuB,EAAE,SAAS;EAClC,sBAAsB,EAAE,SAAS;EACjC,sBAAsB,EAAE,SAAS;EACjC,uBAAuB,EAAE,qBAAqB;EAC9C,sBAAsB,EAAE,uBAAuB;EAC/C,6BAA6B,EAAE,uBAAuB;EAEtD;EACA,oBAAoB,EAAE,sBAAsB;EAC5C;EACA;EACA;EACA;EACA;EACA,kBAAkB,EAAE,SAAS;EAC7B,mBAAmB,EAAE,SAAS;EAC9B,qBAAqB,EAAE,SAAS;EAChC,oBAAoB,EAAE,uBAAuB;EAC7C,iBAAiB,EAAE,oBAAoB;EACvC,mBAAmB,EAAE,uBAAuB;EAC5C,sBAAsB,EAAE,uBAAuB;EAC/C,6BAA6B,EAAE,uBAAuB;EAEtD;EACA,qBAAqB,EAAE,uBAAuB;EAC9C,sBAAsB,EAAE,uBAAuB;EAC/C,qBAAqB,EAAE,uBAAuB;EAC9C,oBAAoB,EAAE,oBAAoB;EAC1C,qBAAqB,EAAE,uBAAuB;EAE9C;EACA,yBAAyB,EAAE,uBAAuB;EAClD,+BAA+B,EAAE,uBAAuB;EACxD,gCAAgC,EAAE,uBAAuB;EACzD,kCAAkC,EAAE,qBAAqB;EACzD,yBAAyB,EAAE,qBAAqB;EAEhD,gCAAgC,EAAE,uBAAuB;EACzD,sCAAsC,EAAE,uBAAuB;EAC/D,uCAAuC,EAAE,uBAAuB;EAChE,yCAAyC,EAAE,uBAAuB;EAClE,gCAAgC,EAAE,uBAAuB;EAEzD;EACA;EACA;EACA,2BAA2B,EAAE,uBAAuB;EACpD,2BAA2B,EAAE,sBAAsB;EACnD;EACA;EACA;EACA;EACA;EACA;EACA,kCAAkC,EAAE,0BAA0B;EAC9D,wCAAwC,EAAE,0BAA0B;EACpE,yCAAyC,EAAE,0BAA0B;EACrE,2CAA2C,EAAE,uBAAuB;EACpE,kCAAkC,EAAE,uBAAuB;EAE3D;EACA,sBAAsB,EAAE,qBAAqB;EAC7C,yBAAyB,EAAE,qBAAqB;EAChD,gCAAgC,EAAE,wBAAwB;EAC1D,6BAA6B,EAAE,qBAAqB;EACpD,oCAAoC,EAAE,qBAAqB;EAC3D,yBAAyB,EAAE,iBAAiB;EAC5C,gCAAgC,EAAE,qBAAqB;EAEvD,sBAAsB,EAAE,sBAAsB;EAC9C,yBAAyB,EAAE,sBAAsB;EACjD,gCAAgC,EAAE,yBAAyB;EAC3D,6BAA6B,EAAE,sBAAsB;EACrD,oCAAoC,EAAE,sBAAsB;EAC5D,yBAAyB,EAAE,iBAAiB;EAC5C,gCAAgC,EAAE,sBAAsB;EAExD,qBAAqB,EAAE,mBAAmB;EAC1C,wBAAwB,EAAE,mBAAmB;EAC7C,+BAA+B,EAAE,sBAAsB;EACvD,4BAA4B,EAAE,mBAAmB;EACjD,mCAAmC,EAAE,mBAAmB;EACxD,wBAAwB,EAAE,iBAAiB;EAC3C,+BAA+B,EAAE,mBAAmB;EAEpD,mBAAmB,EAAE,mBAAmB;EACxC,sBAAsB,EAAE,mBAAmB;EAC3C,6BAA6B,EAAE,mBAAmB;EAClD,0BAA0B,EAAE,mBAAmB;EAC/C,iCAAiC,EAAE,mBAAmB;EACtD,sBAAsB,EAAE,qBAAqB;EAC7C,6BAA6B,EAAE;AACjC,CAAC","ignoreList":[]}
|
|
@@ -19,7 +19,7 @@ export const light = {
|
|
|
19
19
|
// ── color: page background ────────────────────────────────────────────────
|
|
20
20
|
"color.background": "#fbfbfb",
|
|
21
21
|
// ── color: shadow (used as elevation.*.shadowColor) ───────────────────────
|
|
22
|
-
"color.shadow": "#
|
|
22
|
+
"color.shadow": "#1b1b1b",
|
|
23
23
|
// ── color: surfaces (bg implied — no property segment) ──────────────────
|
|
24
24
|
"color.surface.default": "{palette.white}",
|
|
25
25
|
"color.surface.raised": "{palette.white}",
|
|
@@ -323,8 +323,8 @@ export const primitives = {
|
|
|
323
323
|
"elevation.none.shadowOffset.width": 0,
|
|
324
324
|
"elevation.none.shadowOffset.height": 0,
|
|
325
325
|
"elevation.none.elevation": 0,
|
|
326
|
-
"elevation.xs.shadowOpacity": 0.
|
|
327
|
-
"elevation.xs.shadowRadius":
|
|
326
|
+
"elevation.xs.shadowOpacity": 0.06,
|
|
327
|
+
"elevation.xs.shadowRadius": 3,
|
|
328
328
|
"elevation.xs.shadowOffset.width": 0,
|
|
329
329
|
"elevation.xs.shadowOffset.height": 0.5,
|
|
330
330
|
"elevation.xs.elevation": 1,
|
|
@@ -1,7 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* How far the overlay extends below the bar's bottom edge, in dp.
|
|
3
|
+
*
|
|
4
|
+
* The fade needs more room than the bar alone can give it: confined to the bar,
|
|
5
|
+
* the curve has to be steep enough to read as a band. Overhanging lets the tail
|
|
6
|
+
* finish in open space, so the header releases content instead of cutting it.
|
|
7
|
+
*/
|
|
8
|
+
export declare const HEADER_FADE_EXTENT = 22;
|
|
1
9
|
export interface HeaderGradientOverlayProps {
|
|
2
|
-
/** Fill color, fading
|
|
10
|
+
/** Fill color, fading to fully transparent along the overlay. */
|
|
3
11
|
color: string;
|
|
4
12
|
}
|
|
5
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Vertical fade-out overlay behind header content, shared by header variants.
|
|
15
|
+
*
|
|
16
|
+
* Reaches zero rather than stopping short. An overlay ending at partial opacity
|
|
17
|
+
* leaves a hard step wherever it is clipped, and that step is far more visible
|
|
18
|
+
* than the fade it was meant to hide — it is what cuts content off square as it
|
|
19
|
+
* scrolls under the header.
|
|
20
|
+
*
|
|
21
|
+
* Callers size it to overhang the bar by {@link HEADER_FADE_EXTENT}.
|
|
22
|
+
*/
|
|
6
23
|
export declare function HeaderGradientOverlay({ color }: HeaderGradientOverlayProps): import("react").JSX.Element;
|
|
7
24
|
//# sourceMappingURL=HeaderGradientOverlay.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderGradientOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderGradientOverlay.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,0BAA0B;IACzC,
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/LargeTitleHeader/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAgB,CAAC;AASvD,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AA0DD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,aAAsB,EACtB,UAAU,EACV,SAAS,EACT,cAAyB,EACzB,kBAA0B,EAC1B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/LargeTitleHeader/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAgB,CAAC;AASvD,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AA0DD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,aAAsB,EACtB,UAAU,EACV,SAAS,EACT,cAAyB,EACzB,kBAA0B,EAC1B,EAAiB,GAClB,EAAE,qBAAqB,+BAuGvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/TitleHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAGpF,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACnC,6DAA6D;IAC7D,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAsB,EACtB,UAAU,EACV,SAAS,EACT,cAAyB,EACzB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/TitleHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAGpF,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACnC,6DAA6D;IAC7D,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAsB,EACtB,UAAU,EACV,SAAS,EACT,cAAyB,EACzB,EAAiB,GAClB,EAAE,gBAAgB,+BA6ClB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAa,KAAK,cAAc,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAa,KAAK,cAAc,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AA4E1E,UAAU,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IACjF,4DAA4D;IAC5D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,CACI;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAAE,GACpD;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,kBAAkB,EAAE,MAAM,CAAA;CAAE,CACtD,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAa,EACb,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,OAAkB,EAClB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAyCpB;AAyBD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,mDAAmD;IACnD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,+LAqBvB,CAAC;AAIH,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C;;;OAGG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,WAAW,0LASf,CAAC;AAEH,KAAK,gBAAgB,GAAG,OAAO,WAAW,GAAG;IAC3C,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,MAAM,EAAE,OAAO,aAAa,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAkB,gBAAgB,CAAC"}
|
package/package.json
CHANGED
|
@@ -2,12 +2,81 @@ import { useId } from "react";
|
|
|
2
2
|
|
|
3
3
|
import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "react-native-svg";
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* How far the overlay extends below the bar's bottom edge, in dp.
|
|
7
|
+
*
|
|
8
|
+
* The fade needs more room than the bar alone can give it: confined to the bar,
|
|
9
|
+
* the curve has to be steep enough to read as a band. Overhanging lets the tail
|
|
10
|
+
* finish in open space, so the header releases content instead of cutting it.
|
|
11
|
+
*/
|
|
12
|
+
export const HEADER_FADE_EXTENT = 22;
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Where the fade begins, as a fraction of the overlay's height — the bar plus
|
|
16
|
+
* {@link HEADER_FADE_EXTENT}.
|
|
17
|
+
*
|
|
18
|
+
* Sits inside the bar rather than at its bottom edge, so the tint has already
|
|
19
|
+
* begun thinning before content reaches the boundary. That is the trade this
|
|
20
|
+
* value makes: a longer, gentler ramp, paid for with content being faintly
|
|
21
|
+
* visible through the lower part of the bar.
|
|
22
|
+
*/
|
|
23
|
+
const FADE_START = 0.45;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Stops used to approximate the fade curve. Below ~10 the ramp shows as a series
|
|
27
|
+
* of bands on an 8-bit display; above ~14 the extra stops cost SVG parse time
|
|
28
|
+
* with nothing visible in return.
|
|
29
|
+
*/
|
|
30
|
+
const FADE_STOPS = 12;
|
|
31
|
+
|
|
32
|
+
/** Ceiling on the fade's opacity — see {@link alphaAt}. */
|
|
33
|
+
const MAX_FADE_ALPHA = 0.95;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
|
|
37
|
+
* bottom.
|
|
38
|
+
*
|
|
39
|
+
* The curve's slope is zero at both ends, so neither the start of the fade nor
|
|
40
|
+
* its finish leaves a seam. A two-stop linear ramp has a constant slope that
|
|
41
|
+
* begins and ends abruptly, and those two hard edges are what read as a line
|
|
42
|
+
* drawn across the content rather than the header letting go of it.
|
|
43
|
+
*
|
|
44
|
+
* The cap holds the ramp just short of solid, so the whole overlay reads as one
|
|
45
|
+
* continuous gradient rather than an opaque plateau with a curve bolted on.
|
|
46
|
+
*/
|
|
47
|
+
const alphaAt = (t: number) => Math.min((1 + Math.cos(Math.PI * t)) / 2, MAX_FADE_ALPHA);
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Every input is a module constant, so the ramp is built once at load rather
|
|
51
|
+
* than rebuilt per render.
|
|
52
|
+
*
|
|
53
|
+
* The leading stop belongs to this list rather than being a sibling element:
|
|
54
|
+
* `LinearGradient` types its children as a flat `ReactElement[]`, so an element
|
|
55
|
+
* beside a mapped array would nest and fail to type-check.
|
|
56
|
+
*/
|
|
57
|
+
const STOPS = [
|
|
58
|
+
{ offset: 0, opacity: 1 },
|
|
59
|
+
...Array.from({ length: FADE_STOPS }, (_, index) => {
|
|
60
|
+
const t = index / (FADE_STOPS - 1);
|
|
61
|
+
return { offset: FADE_START + t * (1 - FADE_START), opacity: alphaAt(t) };
|
|
62
|
+
}),
|
|
63
|
+
];
|
|
64
|
+
|
|
5
65
|
export interface HeaderGradientOverlayProps {
|
|
6
|
-
/** Fill color, fading
|
|
66
|
+
/** Fill color, fading to fully transparent along the overlay. */
|
|
7
67
|
color: string;
|
|
8
68
|
}
|
|
9
69
|
|
|
10
|
-
/**
|
|
70
|
+
/**
|
|
71
|
+
* Vertical fade-out overlay behind header content, shared by header variants.
|
|
72
|
+
*
|
|
73
|
+
* Reaches zero rather than stopping short. An overlay ending at partial opacity
|
|
74
|
+
* leaves a hard step wherever it is clipped, and that step is far more visible
|
|
75
|
+
* than the fade it was meant to hide — it is what cuts content off square as it
|
|
76
|
+
* scrolls under the header.
|
|
77
|
+
*
|
|
78
|
+
* Callers size it to overhang the bar by {@link HEADER_FADE_EXTENT}.
|
|
79
|
+
*/
|
|
11
80
|
export function HeaderGradientOverlay({ color }: HeaderGradientOverlayProps) {
|
|
12
81
|
const gradientId = useId();
|
|
13
82
|
|
|
@@ -15,8 +84,9 @@ export function HeaderGradientOverlay({ color }: HeaderGradientOverlayProps) {
|
|
|
15
84
|
<Svg height="100%" width="100%">
|
|
16
85
|
<Defs>
|
|
17
86
|
<SvgLinearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
|
|
18
|
-
|
|
19
|
-
|
|
87
|
+
{STOPS.map((stop) => (
|
|
88
|
+
<Stop key={stop.offset} offset={stop.offset} stopColor={color} stopOpacity={stop.opacity} />
|
|
89
|
+
))}
|
|
20
90
|
</SvgLinearGradient>
|
|
21
91
|
</Defs>
|
|
22
92
|
<Rect width="100%" height="100%" fill={`url(#${gradientId})`} />
|
|
@@ -10,7 +10,7 @@ import { Portal } from "../../../portal";
|
|
|
10
10
|
import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "../../../screen/ScreenContext";
|
|
11
11
|
import { Toolbar } from "../../../toolbar";
|
|
12
12
|
import { HeaderDismissButton } from "../../header-buttons";
|
|
13
|
-
import { HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay";
|
|
13
|
+
import { HEADER_FADE_EXTENT, HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay";
|
|
14
14
|
import type { TitleHeaderProps } from "../TitleHeader";
|
|
15
15
|
|
|
16
16
|
const AnimatedText = Animated.createAnimatedComponent(Text);
|
|
@@ -116,14 +116,11 @@ export function LargeTitleHeader({
|
|
|
116
116
|
onDismiss,
|
|
117
117
|
titleAlignment = "center",
|
|
118
118
|
isLargeTitleHidden = false,
|
|
119
|
-
bg = "
|
|
119
|
+
bg = "background",
|
|
120
120
|
}: LargeTitleHeaderProps) {
|
|
121
121
|
const { theme } = useUnistyles();
|
|
122
122
|
|
|
123
|
-
const bgColor =
|
|
124
|
-
resolveThemeColor(bg, theme) ??
|
|
125
|
-
(theme.color as unknown as Record<string, string | undefined>)["surface.default"] ??
|
|
126
|
-
"";
|
|
123
|
+
const bgColor = resolveThemeColor(bg, theme) ?? "";
|
|
127
124
|
|
|
128
125
|
const isTransparent = bgColor === "transparent";
|
|
129
126
|
const gradientColor = isTransparent ? theme.color.background : bgColor;
|
|
@@ -237,12 +234,16 @@ const styles = StyleSheet.create((theme, runtime) => ({
|
|
|
237
234
|
height: runtime.insets.top,
|
|
238
235
|
backgroundColor: bgColor,
|
|
239
236
|
}),
|
|
237
|
+
// Overhangs the bar by `HEADER_FADE_EXTENT` so the fade has room to finish
|
|
238
|
+
// below it — confined to the bar, the curve would be steep enough to read as a
|
|
239
|
+
// band. Nothing on the path clips and the overlay is `pointerEvents="none"`,
|
|
240
|
+
// so the spill costs neither layout nor touches.
|
|
240
241
|
gradient: {
|
|
241
242
|
position: "absolute",
|
|
242
243
|
top: 0,
|
|
243
244
|
left: 0,
|
|
244
245
|
right: 0,
|
|
245
|
-
bottom:
|
|
246
|
+
bottom: -HEADER_FADE_EXTENT,
|
|
246
247
|
},
|
|
247
248
|
bar: {
|
|
248
249
|
height: theme.layout.header.height,
|
|
@@ -8,7 +8,7 @@ import { resolveThemeColor } from "#utils/resolve-theme-color";
|
|
|
8
8
|
import { FONT_WEIGHT_VALUE } from "#utils/typography";
|
|
9
9
|
import { Toolbar } from "../../../toolbar";
|
|
10
10
|
import { HeaderDismissButton, type HeaderDismissProps } from "../../header-buttons";
|
|
11
|
-
import { HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay";
|
|
11
|
+
import { HEADER_FADE_EXTENT, HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay";
|
|
12
12
|
|
|
13
13
|
export interface TitleHeaderProps extends HeaderDismissProps {
|
|
14
14
|
title?: string;
|
|
@@ -53,7 +53,7 @@ export function TitleHeader({
|
|
|
53
53
|
navigation,
|
|
54
54
|
onDismiss,
|
|
55
55
|
titleAlignment = "center",
|
|
56
|
-
bg = "
|
|
56
|
+
bg = "background",
|
|
57
57
|
}: TitleHeaderProps) {
|
|
58
58
|
const { theme } = useUnistyles();
|
|
59
59
|
|
|
@@ -113,12 +113,16 @@ const styles = StyleSheet.create((theme, runtime) => ({
|
|
|
113
113
|
height: runtime.insets.top,
|
|
114
114
|
backgroundColor: isTransparent ? "transparent" : bgColor,
|
|
115
115
|
}),
|
|
116
|
+
// Overhangs the bar by `HEADER_FADE_EXTENT` so the fade has room to finish
|
|
117
|
+
// below it — confined to the bar, the curve would be steep enough to read as a
|
|
118
|
+
// band. Nothing on the path clips and the overlay is `pointerEvents="none"`,
|
|
119
|
+
// so the spill costs neither layout nor touches.
|
|
116
120
|
gradient: {
|
|
117
121
|
position: "absolute",
|
|
118
122
|
top: 0,
|
|
119
123
|
left: 0,
|
|
120
124
|
right: 0,
|
|
121
|
-
bottom:
|
|
125
|
+
bottom: -HEADER_FADE_EXTENT,
|
|
122
126
|
},
|
|
123
127
|
bar: {
|
|
124
128
|
height: theme.layout.header.height,
|
|
@@ -29,9 +29,9 @@ interface ToolbarGroupContextValue {
|
|
|
29
29
|
/** Foreground token inherited by each button's icon and label. */
|
|
30
30
|
tint: ColorToken;
|
|
31
31
|
/**
|
|
32
|
-
* True inside a {@link ToolbarGroup}.
|
|
33
|
-
*
|
|
34
|
-
*
|
|
32
|
+
* True inside a {@link ToolbarGroup}. Selects the `grouped` style variant: the
|
|
33
|
+
* cell sheds its own width, padding, border and shadow, because the capsule
|
|
34
|
+
* supplies all four for the whole group.
|
|
35
35
|
*/
|
|
36
36
|
isGrouped: boolean;
|
|
37
37
|
}
|
|
@@ -43,10 +43,43 @@ const ToolbarGroupContext = createContext<ToolbarGroupContextValue>({
|
|
|
43
43
|
isGrouped: false,
|
|
44
44
|
});
|
|
45
45
|
|
|
46
|
-
/**
|
|
47
|
-
|
|
46
|
+
/**
|
|
47
|
+
* Square cell of an icon-only item, in dp. Just under Apple's 44pt minimum
|
|
48
|
+
* touch target; `HIT_SLOP` carries the cell past it.
|
|
49
|
+
*/
|
|
50
|
+
const ITEM_SIZE = 42;
|
|
51
|
+
|
|
52
|
+
/** Horizontal padding of an item that owns its footprint, in dp. */
|
|
53
|
+
const ITEM_PADDING = 10;
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* How far a filled cell is inset inside the capsule, per edge, in dp. A fill
|
|
57
|
+
* flush with the capsule's own height would collide with its rounded end caps;
|
|
58
|
+
* the inset keeps the two curves clear of one another.
|
|
59
|
+
*/
|
|
60
|
+
const FILLED_INSET = 4;
|
|
61
|
+
|
|
62
|
+
/** Cell of a grouped item that paints its own fill, in dp. */
|
|
63
|
+
const FILLED_ITEM_SIZE = ITEM_SIZE - FILLED_INSET * 2;
|
|
64
|
+
|
|
65
|
+
/** Horizontal padding inside the capsule's end caps, in dp. */
|
|
66
|
+
const CAPSULE_PADDING = 10;
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Item count from which a capsule takes {@link CAPSULE_PADDING_EXTRA}. A lone
|
|
70
|
+
* item sits in a capsule barely wider than itself and needs no extra room; from
|
|
71
|
+
* two up the run reads as a bar, and end caps sized for one look pinched.
|
|
72
|
+
*/
|
|
73
|
+
const CAPSULE_WIDE_ITEMS = 2;
|
|
74
|
+
|
|
75
|
+
/** Additional end-cap padding at {@link CAPSULE_WIDE_ITEMS} items or more, in dp. */
|
|
76
|
+
const CAPSULE_PADDING_EXTRA = 4;
|
|
48
77
|
|
|
49
|
-
/**
|
|
78
|
+
/**
|
|
79
|
+
* Touch expansion outside the cell, in dp — uniform on all four sides, grouped
|
|
80
|
+
* or not. Safe inside a capsule because its 20dp item gap exceeds two
|
|
81
|
+
* neighbouring 8dp expansions, so no item can steal a tap aimed at the next.
|
|
82
|
+
*/
|
|
50
83
|
const HIT_SLOP = 8;
|
|
51
84
|
|
|
52
85
|
/** Typographic role of a text item's label. */
|
|
@@ -124,8 +157,13 @@ export function ToolbarButton({
|
|
|
124
157
|
const fg = tint ?? groupTint;
|
|
125
158
|
const bg = background ?? groupBackground;
|
|
126
159
|
const shape = Children.count(children) > 0 ? "label" : "icon";
|
|
160
|
+
// A grouped cell normally shrinks to its glyph, which is invisible while it is
|
|
161
|
+
// transparent but shows as a lozenge the width of that glyph the moment the
|
|
162
|
+
// cell paints. An explicit `background` therefore has to buy the footprint
|
|
163
|
+
// back — see the `filled` variant.
|
|
164
|
+
const isFilled = isGrouped && background !== undefined;
|
|
127
165
|
|
|
128
|
-
styles.useVariants({ shape, grouped: isGrouped });
|
|
166
|
+
styles.useVariants({ shape, grouped: isGrouped, filled: isFilled });
|
|
129
167
|
|
|
130
168
|
// Read during render rather than inside the `style` callback below. The
|
|
131
169
|
// callback can run after sibling buttons have rendered, and `useVariants` is
|
|
@@ -214,9 +252,14 @@ export const ToolbarGroup = forwardRef<ComponentRef<typeof View>, ToolbarGroupPr
|
|
|
214
252
|
[tint]
|
|
215
253
|
);
|
|
216
254
|
|
|
255
|
+
// `Children.count` treats a fragment as a single child, so items wrapped in
|
|
256
|
+
// one keep the tighter padding. Walking the tree to flatten them would cost a
|
|
257
|
+
// traversal per render to settle 4dp, which is not a trade worth making.
|
|
258
|
+
const isCrowded = Children.count(children) >= CAPSULE_WIDE_ITEMS;
|
|
259
|
+
|
|
217
260
|
return (
|
|
218
261
|
<ToolbarGroupContext.Provider value={context}>
|
|
219
|
-
<View ref={ref} style={[styles.capsule(background), style]} {...rest}>
|
|
262
|
+
<View ref={ref} style={[styles.capsule(background, isCrowded), style]} {...rest}>
|
|
220
263
|
{children}
|
|
221
264
|
</View>
|
|
222
265
|
</ToolbarGroupContext.Provider>
|
|
@@ -282,11 +325,11 @@ const styles = StyleSheet.create((theme) => ({
|
|
|
282
325
|
// `background` is an open `ColorToken` — it accepts raw literals, so it cannot
|
|
283
326
|
// be enumerated as a variant. Resolving inside the factory keeps the fill tied
|
|
284
327
|
// to the live theme.
|
|
285
|
-
capsule: (background: ColorToken) => ({
|
|
328
|
+
capsule: (background: ColorToken, isCrowded: boolean) => ({
|
|
286
329
|
flexDirection: "row",
|
|
287
330
|
alignItems: "center",
|
|
288
331
|
gap: theme.spacing["5"],
|
|
289
|
-
paddingHorizontal:
|
|
332
|
+
paddingHorizontal: CAPSULE_PADDING + (isCrowded ? CAPSULE_PADDING_EXTRA : 0),
|
|
290
333
|
borderRadius: theme.radius.full,
|
|
291
334
|
backgroundColor: resolveThemeColor(background, theme),
|
|
292
335
|
borderWidth: StyleSheet.hairlineWidth,
|
|
@@ -312,19 +355,40 @@ const styles = StyleSheet.create((theme) => ({
|
|
|
312
355
|
true: { paddingHorizontal: 0 },
|
|
313
356
|
false: {
|
|
314
357
|
minWidth: ITEM_SIZE,
|
|
315
|
-
paddingHorizontal:
|
|
358
|
+
paddingHorizontal: ITEM_PADDING,
|
|
316
359
|
borderWidth: StyleSheet.hairlineWidth,
|
|
317
360
|
borderColor: theme.color["border.subtle"],
|
|
318
361
|
...theme.elevation.xs,
|
|
319
362
|
},
|
|
320
363
|
},
|
|
364
|
+
// Only meaningful inside a capsule: a standalone cell already owns its
|
|
365
|
+
// footprint, so painting it a different colour changes nothing but paint.
|
|
366
|
+
filled: {
|
|
367
|
+
true: {},
|
|
368
|
+
false: {},
|
|
369
|
+
},
|
|
321
370
|
},
|
|
322
371
|
compoundVariants: [
|
|
323
372
|
{
|
|
324
373
|
shape: "icon",
|
|
325
374
|
grouped: true,
|
|
375
|
+
filled: false,
|
|
326
376
|
styles: { width: undefined },
|
|
327
377
|
},
|
|
378
|
+
// A filled cell takes its footprint back, inset from the capsule's height
|
|
379
|
+
// so its curve clears the capsule's own.
|
|
380
|
+
{
|
|
381
|
+
shape: "icon",
|
|
382
|
+
grouped: true,
|
|
383
|
+
filled: true,
|
|
384
|
+
styles: { width: FILLED_ITEM_SIZE, height: FILLED_ITEM_SIZE },
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
shape: "label",
|
|
388
|
+
grouped: true,
|
|
389
|
+
filled: true,
|
|
390
|
+
styles: { height: FILLED_ITEM_SIZE, paddingHorizontal: ITEM_PADDING },
|
|
391
|
+
},
|
|
328
392
|
],
|
|
329
393
|
},
|
|
330
394
|
// Split from `button` so the open-ended fill and the press state stay in the
|
package/src/theme/tokens/dark.ts
CHANGED
|
@@ -7,15 +7,15 @@
|
|
|
7
7
|
*/
|
|
8
8
|
export const dark = {
|
|
9
9
|
// ── color: page background ────────────────────────────────────────────────
|
|
10
|
-
"color.background": "#
|
|
10
|
+
"color.background": "#040506",
|
|
11
11
|
|
|
12
12
|
// ── color: shadow (used as elevation.*.shadowColor) ───────────────────────
|
|
13
13
|
"color.shadow": "#FFFFFF",
|
|
14
14
|
|
|
15
15
|
// ── color: surfaces (bg implied — no property segment) ──────────────────
|
|
16
|
-
"color.surface.default": "#
|
|
17
|
-
"color.surface.raised": "
|
|
18
|
-
"color.surface.sunken": "#
|
|
16
|
+
"color.surface.default": "#0C0F12",
|
|
17
|
+
"color.surface.raised": "#101418",
|
|
18
|
+
"color.surface.sunken": "#080A0C",
|
|
19
19
|
"color.surface.overlay": "rgba(0, 0, 0, 0.72)",
|
|
20
20
|
"color.surface.accent": "{palette.emerald.500}",
|
|
21
21
|
"color.surface.accent.subtle": "{palette.emerald.950}",
|
|
@@ -18,7 +18,7 @@ export const light = {
|
|
|
18
18
|
"color.background": "#fbfbfb",
|
|
19
19
|
|
|
20
20
|
// ── color: shadow (used as elevation.*.shadowColor) ───────────────────────
|
|
21
|
-
"color.shadow": "#
|
|
21
|
+
"color.shadow": "#1b1b1b",
|
|
22
22
|
|
|
23
23
|
// ── color: surfaces (bg implied — no property segment) ──────────────────
|
|
24
24
|
"color.surface.default": "{palette.white}",
|
|
@@ -326,8 +326,8 @@ export const primitives = {
|
|
|
326
326
|
"elevation.none.shadowOffset.height": 0,
|
|
327
327
|
"elevation.none.elevation": 0,
|
|
328
328
|
|
|
329
|
-
"elevation.xs.shadowOpacity": 0.
|
|
330
|
-
"elevation.xs.shadowRadius":
|
|
329
|
+
"elevation.xs.shadowOpacity": 0.06,
|
|
330
|
+
"elevation.xs.shadowRadius": 3,
|
|
331
331
|
"elevation.xs.shadowOffset.width": 0,
|
|
332
332
|
"elevation.xs.shadowOffset.height": 0.5,
|
|
333
333
|
"elevation.xs.elevation": 1,
|