jfs-components 0.0.72 → 0.0.73

package/lib/typescript/src/components/DonutChart/DonutChart.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+/**
+ * Per-segment data definition for the data-driven `segments` prop.
+ *
+ * Each segment renders one arc on the donut ring. `value` controls the
+ * arc's angular share (its weight relative to the sum of all values).
+ * Use `modes` per segment to override the default `Appearance / DataViz`
+ * mode (the parent injects per-index defaults of `Senary`, `Primary`,
+ * `Secondary`, `Tertiary`, `Quaternary`, `Quinary`, then cycles).
+ */
+export type DonutChartSegmentData = {
+    /** Stable React key. */
+    key?: React.Key;
+    /** Segment's angular weight (relative to the sum of all segment values). */
+    value: number;
+    /** Hard-override the segment color. Bypasses `dataViz/bg` token resolution. */
+    color?: string;
+    /**
+     * Per-segment design token mode overrides. Merged on top of parent
+     * `modes` and the per-index `Appearance / DataViz` defaults.
+     */
+    modes?: Record<string, any>;
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string;
+};
+export type DonutChartProps = {
+    /**
+     * Data-driven segment list. Used when no `children` slot is provided.
+     * Defaults to six equal segments themed across the
+     * `Appearance / DataViz` palette.
+     */
+    segments?: DonutChartSegmentData[];
+    /**
+     * Optional center value text (large/bold). Pass `null`/`false` to hide.
+     * Accepts a string or any `ReactNode` for full control.
+     */
+    value?: React.ReactNode;
+    /**
+     * Optional center label text (smaller, beneath the value). Pass
+     * `null`/`false` to hide. Accepts a string or any `ReactNode`.
+     */
+    label?: React.ReactNode;
+    /**
+     * Slot for custom center content. When provided, it replaces the
+     * default `value`/`label` text wrap entirely.
+     */
+    children?: React.ReactNode;
+    /** Outer diameter in px. Defaults to 194 (matching the Figma reference). */
+    size?: number;
+    /**
+     * Ring stroke width in px. Defaults to 18% of `size` so the donut keeps
+     * the same visual proportions across sizes.
+     */
+    strokeWidth?: number;
+    /**
+     * Visual gap between adjacent segments expressed in degrees of arc.
+     * Defaults to 0 (segments touch). Use small values (1–4°) for
+     * separation when many segments are present.
+     */
+    gap?: number;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override default value text styles. */
+    valueStyle?: StyleProp<TextStyle>;
+    /** Override default label text styles. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label announced for the whole donut chart. */
+    accessibilityLabel?: string;
+};
+type DonutChartSegmentProps = {
+    /** Angular weight relative to the sum of sibling segment values. */
+    value: number;
+    /** Hard-override segment color (bypasses tokens). */
+    color?: string;
+    /**
+     * Design token modes for the segment. Merged with parent `modes` and
+     * the per-index `Appearance / DataViz` defaults.
+     */
+    modes?: Record<string, any>;
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string;
+};
+/**
+ * Inert helper used purely to author donut segments declaratively as
+ * `DonutChart.Segment` slot children. The parent reads its props and
+ * renders the actual SVG arcs — this component never renders anything by
+ * itself.
+ */
+declare function DonutChartSegment(_: DonutChartSegmentProps): any;
+/**
+ * `DonutChart` renders a circular ring split into categorical segments.
+ * It is the segmented counterpart of `CircularProgressBar`: there is **no
+ * track background** behind the segments — the colored ring *is* the
+ * data, and each slice is a sibling category rather than a directional or
+ * temporal value.
+ *
+ * The default 6-segment layout receives per-index `Appearance / DataViz`
+ * defaults (segment 1 → `Senary`, 2 → `Primary`, 3 → `Secondary`, 4 →
+ * `Tertiary`, 5 → `Quaternary`, 6 → `Quinary`) so the wheel reads as one
+ * concept split into six color-coded categories. Override `modes` per
+ * segment to remix appearances, or set `Emphasis / DataViz` on the
+ * parent `modes` to dim or brighten the whole wheel at once.
+ *
+ * @component
+ * @param {DonutChartProps} props
+ */
+declare function DonutChart({ segments, value, label, children, size, strokeWidth: strokeWidthProp, gap, modes: propModes, style, valueStyle, labelStyle, accessibilityLabel, }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DonutChart {
+    var Segment: typeof DonutChartSegment;
+}
+export { DonutChartSegment };
+export type { DonutChartSegmentProps };
+export default DonutChart;
+//# sourceMappingURL=DonutChart.d.ts.map

package/lib/typescript/src/components/DonutChartSummary/DonutChartSummary.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * One row of the `DonutChartSummary`. Each item drives BOTH a donut
+ * segment and the matching legend row, so the segment and indicator
+ * always share the same color by construction.
+ */
+export type DonutChartSummaryItem = {
+    /** Stable React key. Falls back to the item label / index. */
+    key?: React.Key;
+    /** The descriptive label rendered next to the indicator dot. */
+    label?: React.ReactNode;
+    /**
+     * The data point — drives the segment's angular share. Same
+     * semantics as `DonutChartSegmentData.value`. When the legend's
+     * right-side text is shown, the resolution order is:
+     * `displayValue` → `formatValue(value)` → hide.
+     */
+    value: number;
+    /**
+     * Optional override for the legend row's right-side text. Falls
+     * back to `formatValue(value)` if a parent-level `formatValue` is
+     * provided; otherwise the value slot is hidden (matches the Figma
+     * `data` boolean toggle on `MetricLegendItem`). Pass `null` or
+     * `false` to explicitly hide on a per-item basis.
+     */
+    displayValue?: React.ReactNode;
+    /**
+     * Hard-override the shared color used for both the donut segment
+     * and the legend indicator. Bypasses `dataViz/bg` token resolution.
+     */
+    color?: string;
+    /**
+     * Per-item design token mode overrides. Merged on top of parent
+     * `modes` and the per-index `Appearance / DataViz` defaults
+     * (`Senary`, `Primary`, `Secondary`, `Tertiary`, `Quaternary`,
+     * `Quinary`, then cycles).
+     */
+    modes?: Record<string, any>;
+    /** Accessibility label for the segment + legend row pairing. */
+    accessibilityLabel?: string;
+};
+export type DonutChartSummaryProps = {
+    /**
+     * Data-driven rows. Each entry produces a donut segment AND a
+     * matching `MetricLegendItem` — the count of legend rows is locked
+     * in step with the count of donut segments by construction.
+     */
+    items?: DonutChartSummaryItem[];
+    /**
+     * Optional formatter applied to each item's numeric `value` when
+     * the item does not provide an explicit `displayValue`. Useful for
+     * the common "format every weight the same way" case
+     * (e.g. `(v) => `${v}%``).
+     */
+    formatValue?: (value: number) => React.ReactNode;
+    /** Center value text inside the donut (large/bold). */
+    centerValue?: React.ReactNode;
+    /** Center label text inside the donut (smaller, beneath the value). */
+    centerLabel?: React.ReactNode;
+    /**
+     * Slot for fully-custom donut center content. When provided it
+     * replaces the default `centerValue`/`centerLabel` text wrap.
+     */
+    donutCenter?: React.ReactNode;
+    /** Outer donut diameter in px. Defaults to 194 (Figma reference). */
+    donutSize?: number;
+    /** Donut ring stroke width in px. Defaults to ~18% of `donutSize`. */
+    donutStrokeWidth?: number;
+    /**
+     * Visual gap between adjacent donut segments expressed in degrees
+     * of arc. Defaults to 0 (segments touch).
+     */
+    donutGap?: number;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override outer container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the legend container styles. */
+    legendStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label announced for the whole summary. */
+    accessibilityLabel?: string;
+};
+/**
+ * `DonutChartSummary` pairs a `DonutChart` with a vertical list of
+ * `MetricLegendItem` rows. The component takes a single `items` array,
+ * so the number of legend rows is locked in step with the number of
+ * donut segments by construction — every segment has exactly one
+ * legend row, and they share the same color through the same
+ * `Appearance / DataViz` cascade as the standalone `DonutChart`.
+ *
+ * The default 4-item layout receives per-index `Appearance / DataViz`
+ * defaults (item 1 → `Senary`, 2 → `Primary`, 3 → `Secondary`, 4 →
+ * `Tertiary`, then cycles). Override `modes` per item to remix, or set
+ * `Emphasis / DataViz` on the parent `modes` to dim or brighten the
+ * whole component at once.
+ *
+ * @component
+ * @param {DonutChartSummaryProps} props
+ */
+declare function DonutChartSummary({ items, formatValue, centerValue, centerLabel, donutCenter, donutSize, donutStrokeWidth, donutGap, modes: propModes, style, legendStyle, accessibilityLabel, }: DonutChartSummaryProps): import("react/jsx-runtime").JSX.Element;
+export default DonutChartSummary;
+//# sourceMappingURL=DonutChartSummary.d.ts.map

package/lib/typescript/src/components/LinearProgress/LinearProgress.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+export type LinearProgressProps = {
+    /** Progress value between 0 and 1. Values are clamped. */
+    value?: number;
+    /** Design token modes for theming */
+    modes?: Record<string, any>;
+    /** Override container styles (the track wrapper) */
+    style?: StyleProp<ViewStyle>;
+    /** Override the track styles */
+    trackStyle?: StyleProp<ViewStyle>;
+    /** Override the indicator styles */
+    indicatorStyle?: StyleProp<ViewStyle>;
+} & Omit<React.ComponentProps<typeof View>, 'style'>;
+declare const LinearProgress: ({ value, modes, style, trackStyle, indicatorStyle, ...rest }: LinearProgressProps) => import("react/jsx-runtime").JSX.Element;
+export default LinearProgress;
+//# sourceMappingURL=LinearProgress.d.ts.map

package/lib/typescript/src/components/MetricLegendItem/MetricLegendItem.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type MetricLegendItemProps = {
+    /** The label text on the left (after the indicator). */
+    label?: React.ReactNode;
+    /**
+     * The value text shown on the right. When `undefined` or `null`, the
+     * value slot is hidden — matching the Figma `data` boolean toggle.
+     */
+    value?: React.ReactNode;
+    /**
+     * Override the indicator dot color. Falls back to the
+     * `metricLegendItem/indicator/bg` design token.
+     */
+    indicatorColor?: string;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the indicator (dot) styles. */
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /** Override the label text styles. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Override the value text styles. */
+    valueStyle?: StyleProp<TextStyle>;
+};
+/**
+ * MetricLegendItem renders a horizontal row consisting of a small colored
+ * indicator dot, a label and an optional value. It is used in chart legends
+ * and similar metric callouts.
+ *
+ * @component
+ * @param {MetricLegendItemProps} props
+ */
+declare function MetricLegendItem({ label, value, indicatorColor, modes, style, indicatorStyle, labelStyle, valueStyle, }: MetricLegendItemProps): import("react/jsx-runtime").JSX.Element;
+export default MetricLegendItem;
+//# sourceMappingURL=MetricLegendItem.d.ts.map

package/lib/typescript/src/components/MonthlyStatusGrid/MonthlyStatusGrid.d.ts

@@ -0,0 +1,119 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+/**
+ * The three semantic states a calendar glyph can be in. Maps 1:1 to the
+ * Figma `Calendar Glyph State` collection modes (`Idle`, `notSaved`,
+ * `saved`) and drives both the glyph fill/foreground tokens and the
+ * matching legend dot.
+ */
+export type MonthlyStatus = 'Idle' | 'notSaved' | 'saved';
+/** One month entry in the grid. */
+export type MonthlyStatusGridMonth = {
+    /** Stable React key. */
+    key?: React.Key;
+    /**
+     * Text rendered inside the glyph (e.g. `'Jan'`). When omitted, defaults
+     * to a 3-letter English month name based on the entry's index.
+     */
+    label?: React.ReactNode;
+    /**
+     * Semantic status. Drives the glyph background/foreground colors and the
+     * legend dot via the Figma `Calendar Glyph State` collection.
+     */
+    status: MonthlyStatus;
+    /**
+     * Per-month design token mode overrides. Merged on top of the parent
+     * `modes` and the per-month `Calendar Glyph State` derived from `status`.
+     */
+    modes?: Record<string, any>;
+    /** Per-month accessibility label. */
+    accessibilityLabel?: string;
+};
+export type MonthlyStatusGridProps = {
+    /**
+     * The months to render. Layout flows left-to-right, top-to-bottom into
+     * `columns` per row. Defaults to 12 `Idle` months (Jan…Dec) so the
+     * component renders something meaningful with no props.
+     */
+    months?: MonthlyStatusGridMonth[];
+    /**
+     * Number of glyphs per row. Default `4` (matching the Figma reference of
+     * 12 months × 4 columns = 3 rows).
+     */
+    columns?: number;
+    /**
+     * Override the legend labels. Pass `false` to hide the legend entirely.
+     * Missing keys fall back to the defaults: `No data`, `Not saved`,
+     * `Saved`.
+     */
+    legend?: false | Partial<Record<MonthlyStatus, React.ReactNode>>;
+    /**
+     * Restrict which legend entries are shown and in what order. Defaults to
+     * all three statuses in `[Idle, notSaved, saved]` order — matching the
+     * Figma reference.
+     */
+    legendStatuses?: MonthlyStatus[];
+    /** Design token modes (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the months section (the rows wrapper). */
+    monthsStyle?: StyleProp<ViewStyle>;
+    /** Style applied to each row of glyphs. */
+    rowStyle?: StyleProp<ViewStyle>;
+    /** Style applied to every calendar glyph. */
+    glyphStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the glyph label text. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Style applied to the legend row. */
+    legendStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label for the entire component. */
+    accessibilityLabel?: string;
+};
+export type CalendarGlyphProps = {
+    /** Text rendered inside the glyph (e.g. `'Jan'`). */
+    label?: React.ReactNode;
+    /**
+     * Semantic status — drives the glyph fill/foreground via the Figma
+     * `Calendar Glyph State` collection.
+     */
+    status?: MonthlyStatus;
+    /** Design token mode overrides. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Label text style override. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label. Defaults to `"{label}, {status}"`. */
+    accessibilityLabel?: string;
+};
+/**
+ * Single calendar-month glyph: a small pill with a status-driven background
+ * and foreground, and a centered month label. Exposed for callers who want
+ * to compose glyphs themselves; most consumers should use
+ * {@link MonthlyStatusGrid} instead, which keeps the count, layout and
+ * legend in sync automatically.
+ */
+declare function CalendarGlyph({ label, status, modes: propModes, style, labelStyle, accessibilityLabel, }: CalendarGlyphProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `MonthlyStatusGrid` shows a year (or any contiguous range of months) as a
+ * grid of small pill-shaped calendar glyphs, each colored by its semantic
+ * status (`Idle` = "No data", `notSaved` = "Not saved", `saved` = "Saved").
+ * A legend below the grid explains the colors.
+ *
+ * Cohesiveness guarantees:
+ * - The number of glyphs is **always** `months.length`. There is no way to
+ *   render a glyph that has no underlying status.
+ * - The legend dot color for a status is resolved through the **same**
+ *   `calendarGlyph/background` token + `Calendar Glyph State` mode as the
+ *   glyph itself, so the visual mapping cannot drift.
+ *
+ * The chart is rendered with plain RN primitives (`View` + `Text`); SVG is
+ * unnecessary here because the glyph shape is a simple rounded rectangle.
+ *
+ * @component
+ */
+declare function MonthlyStatusGrid({ months, columns, legend, legendStatuses, modes: propModes, style, monthsStyle, rowStyle, glyphStyle, labelStyle, legendStyle, accessibilityLabel, }: MonthlyStatusGridProps): import("react/jsx-runtime").JSX.Element;
+export { CalendarGlyph };
+export default MonthlyStatusGrid;
+//# sourceMappingURL=MonthlyStatusGrid.d.ts.map

package/lib/typescript/src/components/OTP/OTP.d.ts

@@ -1,6 +1,71 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
 import { type SupportTextProps } from '../SupportText/SupportText';
+export type OtpResendState = 'counting' | 'ready' | 'sending';
+export type UseOtpResendOptions = {
+    /** Countdown length in seconds. Defaults to 30. */
+    durationSeconds?: number | undefined;
+    /** Called when the user requests a resend. May return a Promise; while pending, state is 'sending'. */
+    onResend?: (() => void | Promise<void>) | undefined;
+    /** Whether the countdown should auto-start on mount. Defaults to true. */
+    autoStart?: boolean | undefined;
+};
+export type UseOtpResendReturn = {
+    state: OtpResendState;
+    /** Seconds remaining in the current countdown (0 when not counting). */
+    secondsLeft: number;
+    /** True while state === 'ready'. */
+    canResend: boolean;
+    /** True while state === 'sending'. */
+    isSending: boolean;
+    /**
+     * Trigger a resend. No-op unless state === 'ready'. Awaits onResend()
+     * before restarting the countdown. Re-throws any onResend rejection
+     * so callers can surface the failure (state returns to 'ready').
+     */
+    resend: () => Promise<void>;
+    /** Manually start (or restart) the countdown. */
+    restart: (durationSeconds?: number) => void;
+    /** Stop the countdown and move to 'ready' (without invoking onResend). */
+    skip: () => void;
+};
+/**
+ * Headless hook that drives an OTP resend countdown.
+ *
+ * The hook is intentionally UI-agnostic: it returns just enough state
+ * (`state`, `secondsLeft`, plus `resend()` / `restart()` / `skip()`) so
+ * consumers can render their own button, support text, etc. The bundled
+ * `OTPResend` component is the canonical UI on top of this hook.
+ */
+export declare function useOtpResend({ durationSeconds, onResend, autoStart, }?: UseOtpResendOptions): UseOtpResendReturn;
+export type OTPResendConfig = {
+    /** Countdown length in seconds. Defaults to 30. */
+    durationSeconds?: number;
+    /** Called when the user taps the resend button. May return a Promise. */
+    onResend?: () => void | Promise<void>;
+    /** Whether the countdown should auto-start on mount. Defaults to true. */
+    autoStart?: boolean;
+    /** Format the countdown line. Defaults to (s) => `Resend OTP in ${s}s`. */
+    formatCountdown?: (secondsLeft: number) => string;
+    /** Label shown in the 'sending' state. Defaults to "Sending…". */
+    sendingLabel?: string;
+    /** Label shown when ready to resend. Defaults to "Resend". */
+    resendLabel?: string;
+    /** SupportText status applied while counting. Defaults to "Loading" (clock icon). */
+    countdownStatus?: SupportTextProps['status'];
+    /**
+     * Mode overrides for the resend Button (in the 'ready' state). Merged
+     * on top of the component default of `{ AppearanceBrand: 'Neutral',
+     * 'Button / Size': 'S', Emphasis: 'Low' }`. Use this to swap to a
+     * different brand/size/emphasis without touching the rest of the UI.
+     */
+    resendButtonModes?: Record<string, any>;
+};
+export type OTPResendProps = OTPResendConfig & {
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+export declare function OTPResend({ durationSeconds, onResend, autoStart, formatCountdown, sendingLabel, resendLabel, countdownStatus, resendButtonModes, modes: propModes, style, }: OTPResendProps): import("react/jsx-runtime").JSX.Element;
 export type OTPProps = {
     /** Number of OTP digits. Defaults to 6. */
     length?: number;
@@ -16,7 +81,7 @@ export type OTPProps = {
     onComplete?: (value: string) => void;
     /** Whether the OTP input is disabled. */
     isDisabled?: boolean;
-    /** Whether the OTP input is in an invalid/error state. */
+    /** Whether the OTP input is in an invalid/error state. Drives underline colour and (optionally) the error message. */
     isInvalid?: boolean;
     /** Regex pattern to filter allowed characters. Defaults to digits only. */
     allowedPattern?: RegExp;
@@ -30,7 +95,28 @@ export type OTPProps = {
     supportText?: React.ReactNode;
     /** SupportText status when using the string shorthand. */
     supportTextStatus?: SupportTextProps['status'];
+    /**
+     * Convenience: shown beneath the slots **only** while `isInvalid` is true.
+     * Renders with status="Error" automatically. When omitted, the regular
+     * `supportText` is shown instead (with status promoted to Error).
+     */
+    errorMessage?: string;
+    /**
+     * When provided, replaces the support area with a managed countdown that
+     * decays into a "Resend" button. Hidden while `isInvalid` is true so the
+     * error message can take precedence.
+     */
+    resend?: OTPResendConfig;
+    /**
+     * Enable native one-time-code auto-fill on the underlying TextInput.
+     * On iOS this surfaces the SMS code in the QuickType bar above the
+     * keyboard (system-managed; no library required). On Android this sets
+     * `autoComplete="one-time-code"`, which the OS can auto-fill from
+     * notifications when the host app is wired up to the SMS Retriever or
+     * SMS User Consent APIs. Defaults to true.
+     */
+    enableSmsAutofill?: boolean;
 };
-declare function OTP({ length, value: controlledValue, defaultValue, onChange, onValueChange, onComplete, isDisabled, isInvalid, allowedPattern, autoFocus, modes: propModes, style, supportText, supportTextStatus, }: OTPProps): import("react/jsx-runtime").JSX.Element;
+declare function OTP({ length, value: controlledValue, defaultValue, onChange, onValueChange, onComplete, isDisabled, isInvalid, allowedPattern, autoFocus, modes: propModes, style, supportText, supportTextStatus, errorMessage, resend, enableSmsAutofill, }: OTPProps): import("react/jsx-runtime").JSX.Element;
 export default OTP;
 //# sourceMappingURL=OTP.d.ts.map

package/lib/typescript/src/components/ProductOverview/ProductOverview.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type ImageSourcePropType } from 'react-native';
+export type ProductOverviewStat = {
+    /** The large prominent value shown on top, e.g. "995", "3%". */
+    value: string;
+    /** The descriptive label rendered beneath the value, e.g. "Purity". */
+    label: string;
+};
+export type ProductOverviewProps = {
+    /** Hero image source rendered at the top of the card. */
+    imageSource?: ImageSourcePropType | string;
+    /** Aspect ratio for the hero image. Defaults to the Figma frame (288:170). */
+    imageRatio?: number;
+    /** Avatar source for the inline ProductLabel chip. */
+    labelImageSource?: ImageSourcePropType | string;
+    /** Text shown next to the avatar in the ProductLabel chip. */
+    label?: string;
+    /** The large product name, e.g. "0.5g Gold Coin". */
+    productName?: string;
+    /** The short multi-line description below the product name. */
+    description?: string;
+    /**
+     * Stats rendered in the bottom row. Each stat shows a large value above a
+     * smaller label. Pass an empty array (or `null`) to hide the row.
+     */
+    stats?: ProductOverviewStat[];
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Custom slot rendered between the description and the stats row, useful
+     * for badges, callouts, etc. Receives the same `modes` as the parent.
+     */
+    children?: React.ReactNode;
+};
+declare const ProductOverview: ({ imageSource, imageRatio, labelImageSource, label, productName, description, stats, modes, style, children, }: ProductOverviewProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductOverview;
+//# sourceMappingURL=ProductOverview.d.ts.map