@molecule/app-weather-card-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,181 @@
+<!--
+AUTO-GENERATED — DO NOT EDIT THIS FILE.
+Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
+Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
+To change this document, edit the module-level JSDoc in src/index.ts.
+Generated: 2026-08-04T00:41:40.523Z
+-->
+
+# @molecule/app-weather-card-react
+
+> **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
+> It is written to be read by coding agents as much as by people, and is generated from this
+> package's source — edit `src/index.ts` JSDoc, not this file.
+
+`@molecule/app-weather-card-react` — current-conditions hero card.
+Gradient background, glass condition pill, optional alert badge,
+hi/lo chip, and a 24h temperature sparkline rendered from a trace.
+
+Stateless about i18n and units: pre-formatted ReactNode labels (eyebrow,
+feelsLikeLabel, highLowLabel, updatedLabel, alertLabel) so the consumer
+owns translation and formatting.
+
+Extracted from the weather-dashboard flagship.
+
+## Quick Start
+
+```tsx
+import { WeatherCard, type WeatherTracePoint } from '@molecule/app-weather-card-react'
+
+const hourly: WeatherTracePoint[] = [
+  { hour: '09:00', temperature: 58 },
+  { hour: '12:00', temperature: 64 },
+  { hour: '15:00', temperature: 66 },
+]
+
+<WeatherCard
+  locationName="San Francisco"
+  region="California, USA"
+  temperature={62}
+  condition="Partly cloudy"
+  conditionIcon="partly_cloudy_day"
+  eyebrow="Right now"
+  feelsLikeLabel="Feels like 60°"
+  highLowLabel="H 68° · L 54°"
+  updatedLabel="Updated 5m ago"
+  alertLevel="watch"
+  alertLabel="Heat watch"
+  trace={hourly}
+/>
+```
+
+## Type
+
+`feature`
+
+## Installation
+
+```bash
+npm install @molecule/app-weather-card-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
+npm install -D @types/react
+```
+
+## API
+
+### Interfaces
+
+#### `WeatherCardProps`
+
+Props for the {@link WeatherCard} component.
+
+```typescript
+interface WeatherCardProps {
+  locationName: string
+  region?: string | null
+  temperature: number
+  /** Currently INERT — nothing renders it; pass `feelsLikeLabel` instead. */
+  feelsLike?: number | null
+  /** Currently INERT — nothing renders it; pass `highLowLabel` instead. */
+  high?: number | null
+  /** Currently INERT — nothing renders it; pass `highLowLabel` instead. */
+  low?: number | null
+  condition?: string | null
+  /** material-symbols icon name. */
+  conditionIcon?: string
+  alertLevel?: WeatherAlertLevel | null
+  alertLabel?: ReactNode
+  /** Pre-formatted relative time string (e.g. "5m ago"). */
+  updatedLabel?: ReactNode
+  unit?: string
+  /** "Right now" eyebrow text — defaults to empty. */
+  eyebrow?: ReactNode
+  /** 24h trace driving the area sparkline. */
+  trace?: ReadonlyArray<WeatherTracePoint>
+  /** Pre-formatted "Feels like {N}°" label. */
+  feelsLikeLabel?: ReactNode
+  /** Pre-formatted high/low chip label. */
+  highLowLabel?: ReactNode
+  className?: string
+}
+```
+
+#### `WeatherTracePoint`
+
+A single hour's temperature measurement in the 24h sparkline trace.
+
+```typescript
+interface WeatherTracePoint {
+  hour: string
+  temperature: number
+}
+```
+
+### Types
+
+#### `WeatherAlertLevel`
+
+Severity level for a weather alert badge.
+
+```typescript
+type WeatherAlertLevel = 'watch' | 'warning' | 'emergency'
+```
+
+### Functions
+
+#### `WeatherCard(props)`
+
+Atmospheric current-conditions hero.
+
+```typescript
+function WeatherCard({
+  locationName,
+  region,
+  temperature,
+  condition,
+  conditionIcon = 'partly_cloudy_day',
+  alertLevel,
+  alertLabel,
+  updatedLabel,
+  unit = '°F',
+  eyebrow,
+  trace,
+  feelsLikeLabel,
+  highLowLabel,
+  className,
+}: WeatherCardProps): ReactElement<unknown, string | JSXElementConstructor<any>>
+```
+
+## Injection Notes
+
+### Requirements
+
+Peer dependencies:
+
+- `@molecule/app-react` ^1.0.0
+- `@molecule/app-ui` ^1.0.0
+- `@molecule/app-ui-react` ^1.0.0
+- `react` ^18.0.0 || ^19.0.0
+
+### Runtime Dependencies
+
+- `@molecule/app-react`
+- `@molecule/app-ui`
+- `@molecule/app-ui-react`
+- `react`
+
+The numeric `feelsLike`, `high` and `low` props are currently INERT —
+nothing renders them; only the pre-formatted `feelsLikeLabel` /
+`highLowLabel` strings appear, so always pass the labels. With no
+`trace` (or fewer than 2 points) the sparkline falls back to a fixed
+DECORATIVE path — it looks like data but is fake; pass a real trace or
+hide the card. `conditionIcon` and the alert badge use Material Symbols
+ligature names (host app must load that font). Styling leans on raw
+Tailwind + Material-3 tokens (`from-primary`, `to-tertiary-container`,
+`text-primary-fixed/80`, arbitrary values like `min-h-[360px]`): a
+Tailwind build source-scanning this package's dist plus an M3 theme are
+prerequisites, and text is always white on the gradient. `unit` defaults
+to '°F'; `temperature` is rendered rounded. Props (documented on the
+exported `WeatherCardProps` interface): locationName, region,
+temperature, feelsLike (inert), high (inert), low (inert), condition,
+conditionIcon, alertLevel, alertLabel, updatedLabel, unit, eyebrow,
+trace, feelsLikeLabel, highLowLabel, className.

package/dist/WeatherCard.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Current-conditions hero card. Pure presentation — the consumer feeds
+ * a location + temperature + optional trace; the component renders the
+ * gradient hero, glass condition pill, alert badge, hi/lo chip, and
+ * 24h temperature sparkline.
+ *
+ * Stateless about units and i18n: pass pre-formatted strings if you
+ * need anything beyond the default integer-rounded temperature.
+ *
+ * @module
+ */
+import type { ReactElement, ReactNode } from 'react';
+/** Severity level for a weather alert badge. */
+export type WeatherAlertLevel = 'watch' | 'warning' | 'emergency';
+/** A single hour's temperature measurement in the 24h sparkline trace. */
+export interface WeatherTracePoint {
+    hour: string;
+    temperature: number;
+}
+/** Props for the {@link WeatherCard} component. */
+export interface WeatherCardProps {
+    locationName: string;
+    region?: string | null;
+    temperature: number;
+    /** Currently INERT — nothing renders it; pass `feelsLikeLabel` instead. */
+    feelsLike?: number | null;
+    /** Currently INERT — nothing renders it; pass `highLowLabel` instead. */
+    high?: number | null;
+    /** Currently INERT — nothing renders it; pass `highLowLabel` instead. */
+    low?: number | null;
+    condition?: string | null;
+    /** material-symbols icon name. */
+    conditionIcon?: string;
+    alertLevel?: WeatherAlertLevel | null;
+    alertLabel?: ReactNode;
+    /** Pre-formatted relative time string (e.g. "5m ago"). */
+    updatedLabel?: ReactNode;
+    unit?: string;
+    /** "Right now" eyebrow text — defaults to empty. */
+    eyebrow?: ReactNode;
+    /** 24h trace driving the area sparkline. */
+    trace?: ReadonlyArray<WeatherTracePoint>;
+    /** Pre-formatted "Feels like {N}°" label. */
+    feelsLikeLabel?: ReactNode;
+    /** Pre-formatted high/low chip label. */
+    highLowLabel?: ReactNode;
+    className?: string;
+}
+/** Atmospheric current-conditions hero. */
+export declare function WeatherCard({ locationName, region, temperature, condition, conditionIcon, alertLevel, alertLabel, updatedLabel, unit, eyebrow, trace, feelsLikeLabel, highLowLabel, className, }: WeatherCardProps): ReactElement;
+export default WeatherCard;
+//# sourceMappingURL=WeatherCard.d.ts.map

package/dist/WeatherCard.d.ts.map

@@ -0,0 +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;AAoCD,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,CAiLjC;AAED,eAAe,WAAW,CAAA"}

package/dist/WeatherCard.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+const ALERT_TONE = {
+    watch: 'bg-warning/30 text-white',
+    warning: 'bg-error/30 text-white',
+    emergency: 'bg-error/60 text-white',
+};
+/** Computes SVG fill and stroke path data for the 24h temperature sparkline. */
+function buildSparkline(trace) {
+    const fallback = {
+        fill: 'M0,68 Q40,52 80,46 T160,38 T240,55 T320,28 T400,42 L400,100 L0,100 Z',
+        stroke: 'M0,68 Q40,52 80,46 T160,38 T240,55 T320,28 T400,42',
+    };
+    if (!trace || trace.length < 2)
+        return fallback;
+    const W = 400;
+    const H = 100;
+    const values = trace.map((p) => p.temperature);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min || 1;
+    const pts = values.map((v, i) => {
+        const x = (i / (values.length - 1)) * W;
+        const y = H - ((v - min) / range) * (H * 0.85) - H * 0.1;
+        return [x, y];
+    });
+    const stroke = pts
+        .map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`)
+        .join(' ');
+    const fill = `${stroke} L${W},${H} L0,${H} Z`;
+    return { fill, stroke };
+}
+/** Atmospheric current-conditions hero. */
+export function WeatherCard({ locationName, region, temperature, condition, conditionIcon = 'partly_cloudy_day', alertLevel, alertLabel, updatedLabel, unit = '°F', eyebrow, trace, feelsLikeLabel, highLowLabel, className, }) {
+    const cm = getClassMap();
+    const sparkline = buildSparkline(trace);
+    return (_jsxs("div", { className: cm.cn(cm.flex({ direction: 'col', justify: 'between' }), cm.sp('p', 10), 'min-h-[360px] bg-gradient-to-br from-primary via-primary-container to-tertiary-container rounded-[2rem] text-white relative overflow-hidden shadow-2xl shadow-primary/30', className), children: [_jsxs("div", { className: cm.cn('relative z-10'), 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), 'uppercase tracking-widest text-primary-fixed/80'), children: eyebrow })) : null, _jsx("h2", { className: cm.cn(cm.textSize('2xl'), cm.fontWeight('semibold'), 'tracking-tight text-white'), children: locationName }), region ? (_jsx("p", { className: cm.cn(cm.textSize('xs'), cm.sp('mt', 1), 'font-mono uppercase tracking-widest text-white/70'), 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'), 'text-[10px] uppercase tracking-widest backdrop-blur-md', ALERT_TONE[alertLevel]), children: [_jsx("span", { className: cm.cn('material-symbols-outlined', 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('tabular-nums text-white'), style: {
+                                    fontSize: '4.5rem',
+                                    fontWeight: 200,
+                                    letterSpacing: '-0.03em',
+                                    lineHeight: 1,
+                                }, 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, 'bg-white/20 backdrop-blur-md border border-white/15'), children: [_jsx("span", { className: cm.cn('material-symbols-outlined', 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'), 'text-white/85'), 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'), 'bg-white/15 backdrop-blur-md tabular-nums'), children: highLowLabel })) : null, updatedLabel ? (_jsx("span", { className: cm.cn(cm.textSize('xs'), 'font-mono uppercase tracking-widest text-white/60'), children: updatedLabel })) : null] })] }), _jsx("div", { className: cm.cn(cm.sp('mt', 10), cm.h(24), cm.w('full'), 'relative z-10'), 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('absolute -right-24 -bottom-24 w-72 h-72 rounded-full bg-white/10 blur-3xl'), "aria-hidden": "true" }), _jsx("div", { className: cm.cn('absolute right-12 top-12 w-20 h-20 rounded-full bg-tertiary-fixed/30 blur-2xl'), "aria-hidden": "true" })] }));
+}
+export default WeatherCard;

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * `@molecule/app-weather-card-react` — current-conditions hero card.
+ * Gradient background, glass condition pill, optional alert badge,
+ * hi/lo chip, and a 24h temperature sparkline rendered from a trace.
+ *
+ * Stateless about i18n and units: pre-formatted ReactNode labels (eyebrow,
+ * feelsLikeLabel, highLowLabel, updatedLabel, alertLabel) so the consumer
+ * owns translation and formatting.
+ *
+ * Extracted from the weather-dashboard flagship.
+ *
+ * @example
+ * ```tsx
+ * import { WeatherCard, type WeatherTracePoint } from '@molecule/app-weather-card-react'
+ *
+ * const hourly: WeatherTracePoint[] = [
+ *   { hour: '09:00', temperature: 58 },
+ *   { hour: '12:00', temperature: 64 },
+ *   { hour: '15:00', temperature: 66 },
+ * ]
+ *
+ * <WeatherCard
+ *   locationName="San Francisco"
+ *   region="California, USA"
+ *   temperature={62}
+ *   condition="Partly cloudy"
+ *   conditionIcon="partly_cloudy_day"
+ *   eyebrow="Right now"
+ *   feelsLikeLabel="Feels like 60°"
+ *   highLowLabel="H 68° · L 54°"
+ *   updatedLabel="Updated 5m ago"
+ *   alertLevel="watch"
+ *   alertLabel="Heat watch"
+ *   trace={hourly}
+ * />
+ * ```
+ *
+ * @remarks
+ * The numeric `feelsLike`, `high` and `low` props are currently INERT —
+ * nothing renders them; only the pre-formatted `feelsLikeLabel` /
+ * `highLowLabel` strings appear, so always pass the labels. With no
+ * `trace` (or fewer than 2 points) the sparkline falls back to a fixed
+ * DECORATIVE path — it looks like data but is fake; pass a real trace or
+ * hide the card. `conditionIcon` and the alert badge use Material Symbols
+ * ligature names (host app must load that font). Styling leans on raw
+ * Tailwind + Material-3 tokens (`from-primary`, `to-tertiary-container`,
+ * `text-primary-fixed/80`, arbitrary values like `min-h-[360px]`): a
+ * Tailwind build source-scanning this package's dist plus an M3 theme are
+ * prerequisites, and text is always white on the gradient. `unit` defaults
+ * to '°F'; `temperature` is rendered rounded. Props (documented on the
+ * exported `WeatherCardProps` interface): locationName, region,
+ * temperature, feelsLike (inert), high (inert), low (inert), condition,
+ * conditionIcon, alertLevel, alertLabel, updatedLabel, unit, eyebrow,
+ * trace, feelsLikeLabel, highLowLabel, className.
+ *
+ * @module
+ */
+export * from './WeatherCard.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AAEH,cAAc,kBAAkB,CAAA"}

package/dist/index.js

@@ -0,0 +1,58 @@
+/**
+ * `@molecule/app-weather-card-react` — current-conditions hero card.
+ * Gradient background, glass condition pill, optional alert badge,
+ * hi/lo chip, and a 24h temperature sparkline rendered from a trace.
+ *
+ * Stateless about i18n and units: pre-formatted ReactNode labels (eyebrow,
+ * feelsLikeLabel, highLowLabel, updatedLabel, alertLabel) so the consumer
+ * owns translation and formatting.
+ *
+ * Extracted from the weather-dashboard flagship.
+ *
+ * @example
+ * ```tsx
+ * import { WeatherCard, type WeatherTracePoint } from '@molecule/app-weather-card-react'
+ *
+ * const hourly: WeatherTracePoint[] = [
+ *   { hour: '09:00', temperature: 58 },
+ *   { hour: '12:00', temperature: 64 },
+ *   { hour: '15:00', temperature: 66 },
+ * ]
+ *
+ * <WeatherCard
+ *   locationName="San Francisco"
+ *   region="California, USA"
+ *   temperature={62}
+ *   condition="Partly cloudy"
+ *   conditionIcon="partly_cloudy_day"
+ *   eyebrow="Right now"
+ *   feelsLikeLabel="Feels like 60°"
+ *   highLowLabel="H 68° · L 54°"
+ *   updatedLabel="Updated 5m ago"
+ *   alertLevel="watch"
+ *   alertLabel="Heat watch"
+ *   trace={hourly}
+ * />
+ * ```
+ *
+ * @remarks
+ * The numeric `feelsLike`, `high` and `low` props are currently INERT —
+ * nothing renders them; only the pre-formatted `feelsLikeLabel` /
+ * `highLowLabel` strings appear, so always pass the labels. With no
+ * `trace` (or fewer than 2 points) the sparkline falls back to a fixed
+ * DECORATIVE path — it looks like data but is fake; pass a real trace or
+ * hide the card. `conditionIcon` and the alert badge use Material Symbols
+ * ligature names (host app must load that font). Styling leans on raw
+ * Tailwind + Material-3 tokens (`from-primary`, `to-tertiary-container`,
+ * `text-primary-fixed/80`, arbitrary values like `min-h-[360px]`): a
+ * Tailwind build source-scanning this package's dist plus an M3 theme are
+ * prerequisites, and text is always white on the gradient. `unit` defaults
+ * to '°F'; `temperature` is rendered rounded. Props (documented on the
+ * exported `WeatherCardProps` interface): locationName, region,
+ * temperature, feelsLike (inert), high (inert), low (inert), condition,
+ * conditionIcon, alertLevel, alertLabel, updatedLabel, unit, eyebrow,
+ * trace, feelsLikeLabel, highLowLabel, className.
+ *
+ * @module
+ */
+export * from './WeatherCard.js';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@molecule/app-weather-card-react",
+  "version": "1.0.0",
+  "description": "Atmospheric current-conditions hero card: gradient background, glass condition pill, 24h temperature sparkline, optional alert badge. Extracted from weather-dashboard flagship.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "molecule",
+    "weather",
+    "card",
+    "hero",
+    "sparkline",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@molecule/app-ui-react": "1.0.0",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "react": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}