@molecule/app-weather-card-react 3.0.0 → 4.0.1
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/README.md +3 -3
- package/dist/WeatherCard.d.ts.map +1 -1
- package/dist/WeatherCard.js +7 -7
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@ AUTO-GENERATED — DO NOT EDIT THIS FILE.
|
|
|
3
3
|
Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
|
|
4
4
|
Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
|
|
5
5
|
To change this document, edit the module-level JSDoc in src/index.ts.
|
|
6
|
-
Generated: 2026-
|
|
6
|
+
Generated: 2026-11-12T04:41:56.070Z
|
|
7
7
|
-->
|
|
8
8
|
|
|
9
9
|
# @molecule/app-weather-card-react
|
|
@@ -151,9 +151,9 @@ function WeatherCard({
|
|
|
151
151
|
|
|
152
152
|
Peer dependencies:
|
|
153
153
|
|
|
154
|
-
- `@molecule/app-react` ^
|
|
154
|
+
- `@molecule/app-react` ^4.0.0
|
|
155
155
|
- `@molecule/app-ui` ^1.0.1
|
|
156
|
-
- `@molecule/app-ui-react` ^
|
|
156
|
+
- `@molecule/app-ui-react` ^4.0.0
|
|
157
157
|
- `react` ^18.0.0 || ^19.0.0
|
|
158
158
|
|
|
159
159
|
### Runtime Dependencies
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeatherCard.d.ts","sourceRoot":"","sources":["../src/WeatherCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIpD,gDAAgD;AAChD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAA;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,mDAAmD;AACnD,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;IACrC,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IACxC,6CAA6C;IAC7C,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;
|
|
1
|
+
{"version":3,"file":"WeatherCard.d.ts","sourceRoot":"","sources":["../src/WeatherCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIpD,gDAAgD;AAChD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAA;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,mDAAmD;AACnD,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;IACrC,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IACxC,6CAA6C;IAC7C,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8BD,2CAA2C;AAC3C,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,MAAM,EACN,WAAW,EACX,SAAS,EACT,aAAmC,EACnC,UAAU,EACV,UAAU,EACV,YAAY,EACZ,IAAW,EACX,OAAO,EACP,KAAK,EACL,cAAc,EACd,YAAY,EACZ,SAAS,GACV,EAAE,gBAAgB,GAAG,YAAY,CA+JjC;AAED,eAAe,WAAW,CAAA"}
|
package/dist/WeatherCard.js
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { getClassMap } from '@molecule/app-ui';
|
|
3
|
-
const ALERT_TONE = {
|
|
4
|
-
watch: 'bg-warning/30 text-white',
|
|
5
|
-
warning: 'bg-error/30 text-white',
|
|
6
|
-
emergency: 'bg-error/60 text-white',
|
|
7
|
-
};
|
|
8
3
|
/** Computes SVG fill and stroke path data for the 24h temperature sparkline. */
|
|
9
4
|
function buildSparkline(trace) {
|
|
10
5
|
const fallback = {
|
|
@@ -34,11 +29,16 @@ function buildSparkline(trace) {
|
|
|
34
29
|
export function WeatherCard({ locationName, region, temperature, condition, conditionIcon = 'partly_cloudy_day', alertLevel, alertLabel, updatedLabel, unit = '°F', eyebrow, trace, feelsLikeLabel, highLowLabel, className, }) {
|
|
35
30
|
const cm = getClassMap();
|
|
36
31
|
const sparkline = buildSparkline(trace);
|
|
37
|
-
|
|
32
|
+
const alertTone = alertLevel === 'watch'
|
|
33
|
+
? cm.weatherCardAlertWatch
|
|
34
|
+
: alertLevel === 'warning'
|
|
35
|
+
? cm.weatherCardAlertWarning
|
|
36
|
+
: cm.weatherCardAlertEmergency;
|
|
37
|
+
return (_jsxs("div", { className: cm.cn(cm.flex({ direction: 'col', justify: 'between' }), cm.sp('p', 10), cm.weatherCardHero, className), children: [_jsxs("div", { className: cm.cn(cm.weatherCardContent), children: [_jsxs("div", { className: cm.flex({ align: 'center', justify: 'between', gap: 'md' }), children: [_jsxs("div", { children: [eyebrow ? (_jsx("p", { className: cm.cn(cm.fontWeight('bold'), cm.textSize('xs'), cm.sp('mb', 1), cm.weatherCardEyebrow), children: eyebrow })) : null, _jsx("h2", { className: cm.cn(cm.textSize('2xl'), cm.fontWeight('semibold'), cm.weatherCardLocation), children: locationName }), region ? (_jsx("p", { className: cm.cn(cm.textSize('xs'), cm.sp('mt', 1), cm.weatherCardRegion), children: region })) : null] }), alertLevel ? (_jsxs("span", { className: cm.cn(cm.flex({ align: 'center', gap: 'xs' }), cm.sp('px', 3), cm.sp('py', 1), cm.roundedFull, cm.fontWeight('bold'), cm.weatherCardAlertBadge, alertTone), children: [_jsx("span", { className: cm.cn(cm.iconGlyphFont, cm.textSize('sm')), "aria-hidden": "true", children: "warning" }), alertLabel ?? alertLevel] })) : null] }), _jsxs("div", { className: cm.cn(cm.flex({ align: 'baseline', gap: 'lg' }), cm.sp('mt', 8)), children: [_jsxs("span", { className: cm.cn(cm.weatherCardTemperature), style: {
|
|
38
38
|
fontSize: '4.5rem',
|
|
39
39
|
fontWeight: 200,
|
|
40
40
|
letterSpacing: '-0.03em',
|
|
41
41
|
lineHeight: 1,
|
|
42
|
-
}, children: [Math.round(temperature), unit] }), _jsxs("div", { className: cm.cn(cm.flex({ align: 'center', gap: 'sm' }), cm.sp('px', 3), cm.sp('py', 1), cm.roundedFull,
|
|
42
|
+
}, children: [Math.round(temperature), unit] }), _jsxs("div", { className: cm.cn(cm.flex({ align: 'center', gap: 'sm' }), cm.sp('px', 3), cm.sp('py', 1), cm.roundedFull, cm.weatherCardConditionPill), children: [_jsx("span", { className: cm.cn(cm.iconGlyphFont, cm.textSize('2xl')), style: { fontVariationSettings: "'FILL' 1" }, "aria-hidden": "true", children: conditionIcon }), condition ? (_jsx("span", { className: cm.cn(cm.fontWeight('semibold'), cm.textSize('sm')), children: condition })) : null] })] }), _jsxs("div", { className: cm.cn(cm.flex({ align: 'center', gap: 'md', wrap: 'wrap' }), cm.sp('mt', 4)), children: [feelsLikeLabel ? (_jsx("span", { className: cm.cn(cm.textSize('sm'), cm.fontWeight('medium'), cm.weatherCardFeelsLike), children: feelsLikeLabel })) : null, highLowLabel ? (_jsx("span", { className: cm.cn(cm.flex({ align: 'center', gap: 'xs' }), cm.sp('px', 3), cm.sp('py', 1), cm.roundedFull, cm.textSize('xs'), cm.fontWeight('bold'), cm.weatherCardHighLowChip), children: highLowLabel })) : null, updatedLabel ? (_jsx("span", { className: cm.cn(cm.textSize('xs'), cm.weatherCardUpdated), children: updatedLabel })) : null] })] }), _jsx("div", { className: cm.cn(cm.sp('mt', 10), cm.h(24), cm.w('full'), cm.weatherCardContent), children: _jsxs("svg", { className: cm.cn(cm.w('full'), cm.h('full')), viewBox: "0 0 400 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [_jsx("path", { d: sparkline.fill, fill: "white", opacity: "0.25" }), _jsx("path", { d: sparkline.stroke, fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round" })] }) }), _jsx("div", { className: cm.cn(cm.weatherCardGlowLarge), "aria-hidden": "true" }), _jsx("div", { className: cm.cn(cm.weatherCardGlowSmall), "aria-hidden": "true" })] }));
|
|
43
43
|
}
|
|
44
44
|
export default WeatherCard;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@molecule/app-weather-card-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"description": "Atmospheric current-conditions hero card: gradient background, glass condition pill, 24h temperature sparkline, optional alert badge. Extracted from weather-dashboard flagship.",
|
|
5
5
|
"homepage": "https://www.molecule.dev/packages/app-weather-card-react",
|
|
6
6
|
"type": "module",
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
"directory": "packages/app/features/weather-card-react"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
|
-
"@molecule/app-react": "^
|
|
39
|
+
"@molecule/app-react": "^4.0.0",
|
|
40
40
|
"@molecule/app-ui": "^1.0.1",
|
|
41
|
-
"@molecule/app-ui-react": "^
|
|
41
|
+
"@molecule/app-ui-react": "^4.0.0",
|
|
42
42
|
"react": "^18.0.0 || ^19.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@molecule/app-react": "
|
|
46
|
-
"@molecule/app-ui": "1.3.
|
|
47
|
-
"@molecule/app-ui-react": "
|
|
45
|
+
"@molecule/app-react": "4.1.2",
|
|
46
|
+
"@molecule/app-ui": "1.3.11",
|
|
47
|
+
"@molecule/app-ui-react": "4.1.0",
|
|
48
48
|
"@types/node": "26.6.5",
|
|
49
49
|
"@types/react": "19.3.0",
|
|
50
50
|
"react": "19.3.1",
|