jfs-components 0.1.2 → 0.1.12

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export interface ProductMerchandisingCardProps {
+    /**
+     * Background media for the card. Accepts a URL string or any RN
+     * `ImageSourcePropType` (same shape as `Avatar`, `MediaCard`, etc.). The
+     * image is rendered full-bleed behind the header and glass footer.
+     */
+    imageSource?: ImageSourcePropType | string;
+    /** Footer title (bold, white). */
+    title?: string;
+    /** Footer subtitle (muted). */
+    subtitle?: string;
+    /**
+     * Header badge label (top-right). The badge is hidden when this is
+     * `undefined` and no `badge` override is provided.
+     */
+    badgeLabel?: string;
+    /**
+     * Full override for the header badge. Takes precedence over `badgeLabel`.
+     */
+    badge?: React.ReactNode;
+    /** Show the header avatar (top-left). Defaults to `true`. */
+    showAvatar?: boolean;
+    /** Avatar image source. */
+    avatarSource?: ImageSourcePropType | string;
+    /** Avatar monogram fallback when no image is supplied. */
+    avatarMonogram?: string;
+    /** Full override for the header avatar. Takes precedence over avatar props. */
+    avatar?: React.ReactNode;
+    /**
+     * Footer "special badge" label (small frosted pill above the title). The
+     * badge is hidden when this is `undefined` and no `specialBadge` override
+     * is provided.
+     */
+    specialBadgeLabel?: string;
+    /** Optional leading node (icon/image) rendered inside the special badge. */
+    specialBadgeIcon?: React.ReactNode;
+    /** Full override for the special badge. Takes precedence over the props above. */
+    specialBadge?: React.ReactNode;
+    /** CTA button label. Defaults to `"CTA"`. */
+    ctaLabel?: string;
+    /** CTA button press handler. */
+    onCtaPress?: () => void;
+    /** Full override for the CTA. Takes precedence over `ctaLabel`/`onCtaPress`. */
+    cta?: React.ReactNode;
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void;
+    /** Card height in px. Defaults to `223` (Figma spec). */
+    height?: number;
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes;
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
+}
+/**
+ * ProductMerchandisingCard — a full-bleed image card (Figma node 5277:317)
+ * with a top header (avatar + badge) and a bottom **glass footer** that
+ * combines a real native background blur with a transparent→black gradient
+ * scrim for legible text over any image.
+ *
+ * Glass footer implementation (works on iOS, Android and Web):
+ *  - **iOS / Android:** `<GlassFill>` wraps `@react-native-community/blur`'s
+ *    `BlurView` — iOS gets a real `UIVisualEffectView` (live OS blur),
+ *    Android gets the community `RealtimeBlurView` with a tinted scrim
+ *    fallback. The native-only module is isolated in `GlassFill.tsx`.
+ *  - **Web:** the platform-extension `GlassFill.web.tsx` renders a translucent
+ *    `View` with `backdrop-filter: blur()` — Metro picks the right file so the
+ *    web bundle never imports the native blur module.
+ *  - The gradient scrim is drawn with `react-native-svg` (one renderer for all
+ *    platforms) so the fade is identical everywhere.
+ *
+ * The blur strength is driven by the Figma `blur/minimal` token, mapped to the
+ * `GlassFill` 0–100 intensity scale the same way `MediaCard` does.
+ */
+declare function ProductMerchandisingCard({ imageSource, title, subtitle, badgeLabel, badge, showAvatar, avatarSource, avatarMonogram, avatar, specialBadgeLabel, specialBadgeIcon, specialBadge, ctaLabel, onCtaPress, cta, onPress, height, modes, style, accessibilityLabel, disableTruncation, }: ProductMerchandisingCardProps): import("react/jsx-runtime").JSX.Element;
+export default ProductMerchandisingCard;
+//# sourceMappingURL=ProductMerchandisingCard.d.ts.map

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

@@ -34,7 +34,13 @@ export type ProductOverviewProps = {
      * for badges, callouts, etc. Receives the same `modes` as the parent.
      */
     children?: React.ReactNode;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
-declare const ProductOverview: ({ imageSource, imageRatio, labelImageSource, label, productName, description, stats, modes, style, children, }: ProductOverviewProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProductOverview: ({ imageSource, imageRatio, labelImageSource, label, productName, description, stats, modes, style, children, disableTruncation, }: ProductOverviewProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductOverview;
 //# sourceMappingURL=ProductOverview.d.ts.map

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

@@ -16,6 +16,12 @@ export type ProgressBadgeProps = {
     textStyle?: StyleProp<TextStyle>;
     /** Accessibility label for screen readers */
     accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 } & React.ComponentProps<typeof View>;
 /**
  * ProgressBadge component that displays an icon, text, and an internal progress bar.
@@ -32,6 +38,6 @@ export type ProgressBadgeProps = {
  * @param {Object} [props.textStyle] - Optional text style overrides.
  * @param {string} [props.accessibilityLabel] - Accessibility label.
  */
-declare function ProgressBadge({ taskName, iconName, value, modes, style, textStyle: textStyleOverride, accessibilityLabel, ...rest }: ProgressBadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function ProgressBadge({ taskName, iconName, value, modes, style, textStyle: textStyleOverride, accessibilityLabel, disableTruncation, ...rest }: ProgressBadgeProps): import("react/jsx-runtime").JSX.Element;
 export default ProgressBadge;
 //# sourceMappingURL=ProgressBadge.d.ts.map

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A value rendered at either end of the marker. A `string`/`number` is rendered
+ * with the built-in title typography; any other `ReactNode` (e.g. a
+ * `MoneyValue`) is rendered as-is so consumers can fully control presentation.
+ */
+type ProjectionMarkerEndValue = React.ReactNode;
+export type ProjectionMarkerProps = {
+    /**
+     * Value shown on the leading (left) end of the marker — typically the
+     * invested/starting amount. Accepts a string for the default styling or any
+     * `ReactNode` (e.g. `MoneyValue`) for custom rendering.
+     */
+    startValue?: ProjectionMarkerEndValue;
+    /**
+     * Value shown on the trailing (right) end of the marker — typically the
+     * projected/ending amount.
+     */
+    endValue?: ProjectionMarkerEndValue;
+    /**
+     * Primary line inside the center badge — typically the duration
+     * (e.g. `"1Y 10M"`).
+     */
+    duration?: React.ReactNode;
+    /**
+     * Secondary line inside the center badge — typically the rate
+     * (e.g. `"@ 8.25 %"`).
+     */
+    rate?: React.ReactNode;
+    /**
+     * Whether to render the connector lines between the end values and the
+     * center badge. Defaults to `true`.
+     */
+    showConnectors?: boolean;
+    /** Design token modes for theming. */
+    modes?: Modes;
+    /** Override the root container styles. */
+    style?: StyleProp<ViewStyle>;
+    /** Override the leading value text styles (only applies to string values). */
+    startValueStyle?: StyleProp<TextStyle>;
+    /** Override the trailing value text styles (only applies to string values). */
+    endValueStyle?: StyleProp<TextStyle>;
+    /** Override the center badge container styles. */
+    badgeStyle?: StyleProp<ViewStyle>;
+    /** Override the duration text styles. */
+    durationStyle?: StyleProp<TextStyle>;
+    /** Override the rate text styles. */
+    rateStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for the whole marker. */
+    accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
+};
+/**
+ * ProjectionMarker renders a start value and an end value connected to a
+ * centered badge that summarizes the projection (e.g. a tenure and interest
+ * rate). It mirrors the Figma `projectionMarker` component and is commonly used
+ * inside "Potential returns" style cards.
+ *
+ * @example
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue="₹1,00,000"
+ *   endValue="₹1,25,101"
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ *
+ * @example Custom end values via MoneyValue
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue={<MoneyValue value="1,00,000" />}
+ *   endValue={<MoneyValue value="1,25,101" />}
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ */
+declare function ProjectionMarker({ startValue, endValue, duration, rate, showConnectors, modes, style, startValueStyle, endValueStyle, badgeStyle, durationStyle, rateStyle, accessibilityLabel, disableTruncation, }: ProjectionMarkerProps): import("react/jsx-runtime").JSX.Element;
+export default ProjectionMarker;
+//# sourceMappingURL=ProjectionMarker.d.ts.map

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

@@ -1,4 +1,5 @@
-import { ViewStyle, StyleProp } from 'react-native';
+import React from 'react';
+import { View, ViewStyle, StyleProp } from 'react-native';
 import type { Modes } from '../../design-tokens';
 export interface RadioProps {
     /**
@@ -26,6 +27,6 @@ export interface RadioProps {
      */
     testID?: string;
 }
-export declare function Radio({ selected, disabled, onPress, modes, style, testID, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<View>>;
 export default Radio;
 //# sourceMappingURL=Radio.d.ts.map

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

@@ -15,8 +15,8 @@
  * the new `Radio` component under the old `RadioButton` names; please migrate
  * existing usages to `Radio` at your earliest convenience.
  */
-import { Radio, type RadioProps } from '../Radio/Radio';
+import { type RadioProps } from '../Radio/Radio';
 export type RadioButtonProps = RadioProps;
-export declare const RadioButton: typeof Radio;
+export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<import("react-native").View>>;
 export default RadioButton;
 //# sourceMappingURL=RadioButton.d.ts.map

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

@@ -18,8 +18,14 @@ type SectionProps = {
      * Web-specific accessibility props (only used on web platform)
      */
     webAccessibilityProps?: WebAccessibilityProps;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 } & React.ComponentProps<typeof View>;
-declare function Section({ title, supportText, showSupportText, slot, slotDirection, modes, onPress, style, accessibilityLabel: _accessibilityLabel, accessibilityHint, webAccessibilityProps, ...rest }: SectionProps): import("react/jsx-runtime").JSX.Element;
+declare function Section({ title, supportText, showSupportText, slot, slotDirection, modes, onPress, style, accessibilityLabel: _accessibilityLabel, accessibilityHint, webAccessibilityProps, disableTruncation, ...rest }: SectionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Section {
     var Bento: typeof SectionBento;
 }

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * Imperative handle exposed via `ref`. The primary way to read a slider's value
+ * is still the controlled `value` + `onChange` pair (each `<Slider />` reports
+ * its own value, so multiple sliders are disambiguated by their own handlers).
+ * The ref is a convenience for reading the latest value on demand (e.g. on a
+ * button press) or imperatively nudging an uncontrolled slider.
+ *
+ * @example
+ * const slider = useRef<SliderHandle>(null)
+ * slider.current?.setValue(50)
+ * const v = slider.current?.getValue()
+ */
+export interface SliderHandle {
+    /** Returns the slider's current (clamped, step-snapped) value. */
+    getValue: () => number;
+    /** Sets the value. Fires `onChange` + `onChangeEnd`. */
+    setValue: (value: number) => void;
+    /** Steps the value up by one `step` (or `by`, snapped to `step`). */
+    increment: (by?: number) => void;
+    /** Steps the value down by one `step` (or `by`, snapped to `step`). */
+    decrement: (by?: number) => void;
+}
+export interface SliderProps {
+    /** Current value (controlled). Pair with `onChange`. */
+    value?: number;
+    /** Initial value (uncontrolled). Defaults to `minValue`. */
+    defaultValue?: number;
+    /** Called continuously while the value changes (drag / keypress / track press). */
+    onChange?: (value: number) => void;
+    /** Called once when the interaction ends (drag release / keypress). */
+    onChangeEnd?: (value: number) => void;
+    /** Minimum selectable value. Defaults to `0`. */
+    minValue?: number;
+    /** Maximum selectable value. Defaults to `100`. */
+    maxValue?: number;
+    /** Snap increment. Defaults to `1`. Use a smaller value for finer control. */
+    step?: number;
+    /** Disables interaction and dims the control. */
+    isDisabled?: boolean;
+    /**
+     * `Intl.NumberFormat` options used to format the value bubble and the
+     * min/max labels (e.g. `{ style: 'currency', currency: 'USD' }`).
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** BCP-47 locale used with `formatOptions`. Defaults to the runtime locale. */
+    locale?: string;
+    /**
+     * Full override for value formatting. Takes precedence over `formatOptions`.
+     * Receives the raw numeric value, returns the string to display.
+     */
+    formatValue?: (value: number) => string;
+    /** Renders fully custom value-bubble content. Takes precedence over `formatValue`. */
+    renderTooltip?: (value: number) => React.ReactNode;
+    /**
+     * When `true` (default, matches the Figma design) the value bubble is
+     * always visible. When `false` it behaves like a normal tooltip — hidden at
+     * rest and revealed only while the user interacts (dragging on touch, or
+     * hovering/dragging on web), then dismissed as soon as the finger lifts.
+     *
+     * Either way the bubble floats above the track and never occupies layout
+     * space, so it will overlap content above the slider — leave room for it.
+     */
+    alwaysShowTooltip?: boolean;
+    /** Toggles the min/max labels below the track. Defaults to `true`. */
+    showLabels?: boolean;
+    /** Override for the left (min) label. Defaults to the formatted `minValue`. */
+    minLabel?: React.ReactNode;
+    /** Override for the right (max) label. Defaults to the formatted `maxValue`. */
+    maxLabel?: React.ReactNode;
+    /** Slider width. Defaults to `'100%'` so it fills its parent. */
+    width?: number | `${number}%`;
+    /** Design-token modes for theming. */
+    modes?: Modes;
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for screen readers. */
+    accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
+}
+/**
+ * Slider — Figma node 5373:446 ("Slider").
+ *
+ * A horizontal, single-thumb slider driven entirely by design tokens. It maps a
+ * numeric range (`minValue`–`maxValue`) onto a track with a filled indicator, a
+ * draggable handle, a value bubble pinned above the handle, and optional min/max
+ * labels beneath the track. Built on `PanResponder` so the one code path works
+ * on iOS, Android and the web.
+ *
+ * The design only labels the range bounds, but a slider's purpose is to bind a
+ * value — so the live value is surfaced through the bubble (formatted via
+ * `formatOptions` / `formatValue`) and reported through `onChange` /
+ * `onChangeEnd`. Supports controlled and uncontrolled usage, web keyboard
+ * control, and an imperative {@link SliderHandle} `ref` for on-demand reads.
+ */
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderHandle>>;
+export default Slider;
+//# sourceMappingURL=Slider.d.ts.map

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type StackLayoutDirection = 'vertical' | 'horizontal';
+export type StackProps = ViewProps & {
+    /**
+     * Content laid out inside the stack. `modes` are cascaded to every child via
+     * {@link cloneChildrenWithModes}.
+     */
+    children?: React.ReactNode;
+    /**
+     * Main-axis direction for stack children. Matches the Figma Slot variant:
+     * - `vertical` (default): stacks children in a column
+     * - `horizontal`: arranges children in a row
+     */
+    layoutDirection?: StackLayoutDirection;
+    /**
+     * Alignment along the cross axis.
+     * Defaults to `stretch` for vertical and `flex-start` for horizontal.
+     */
+    alignCrossAxis?: ViewStyle['alignItems'];
+    /**
+     * Distribution along the main axis (maps to `justifyContent`).
+     */
+    justifyMainAxis?: ViewStyle['justifyContent'];
+    /**
+     * Only meaningful when `layoutDirection` is `horizontal`.
+     *
+     * When true, forces every child to share the height of the tallest child. The
+     * height is enforced by the stack itself (`alignItems: 'stretch'` plus an
+     * injected `alignSelf: 'stretch'` on each child), so children can no longer
+     * opt out via their own `alignSelf`. Children with an explicit `height` keep
+     * that height, since a fixed cross-axis dimension defeats stretch in Yoga.
+     *
+     * Overrides `alignCrossAxis` when it applies.
+     */
+    equalHeight?: boolean;
+    /**
+     * Only meaningful when `layoutDirection` is `vertical`.
+     *
+     * When true, forces every child to fill the full width of the stack. The width
+     * is enforced by the stack itself (`alignItems: 'stretch'` plus an injected
+     * `alignSelf: 'stretch'` on each child), so children can no longer opt out via
+     * their own `alignSelf`. Children with an explicit `width` keep that width,
+     * since a fixed cross-axis dimension defeats stretch in Yoga.
+     *
+     * Overrides `alignCrossAxis` when it applies.
+     */
+    fillWidth?: boolean;
+    /**
+     * Mode configuration passed to the token resolver and cascaded to children.
+     */
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Stack — a token-driven layout container for grouped content.
+ *
+ * Use `Stack` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Stack layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Stack>
+ * </ActionFooter>
+ * ```
+ *
+ * @remarks
+ * Previously named `Slot`. The `Slot` export is preserved as a deprecated alias
+ * for backward compatibility.
+ */
+declare function Stack({ children, layoutDirection, alignCrossAxis, justifyMainAxis, equalHeight, fillWidth, modes: propModes, style, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Stack>;
+export default _default;
+//# sourceMappingURL=Stack.d.ts.map

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

@@ -45,6 +45,12 @@ export type SummaryTileProps = {
     descriptionStyle?: StyleProp<TextStyle>;
     /** Accessibility label override (defaults to `title`). */
     accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
 /**
  * SummaryTile composes a title (with an inline `StrengthIndicator`), a
@@ -56,6 +62,6 @@ export type SummaryTileProps = {
  * @component
  * @param {SummaryTileProps} props
  */
-declare function SummaryTile({ title, description, confidence, chevron, children, onPress, modes, style, titleStyle, descriptionStyle, accessibilityLabel, }: SummaryTileProps): import("react/jsx-runtime").JSX.Element;
+declare function SummaryTile({ title, description, confidence, chevron, children, onPress, modes, style, titleStyle, descriptionStyle, accessibilityLabel, disableTruncation, }: SummaryTileProps): import("react/jsx-runtime").JSX.Element;
 export default SummaryTile;
 //# sourceMappingURL=SummaryTile.d.ts.map

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type TableCellAlign = 'left' | 'center' | 'right';
+export type TableCellProps = {
+    children?: React.ReactNode;
+    /** Horizontal alignment of the cell content. @default 'left' */
+    align?: TableCellAlign;
+    /** Fixed cell width. Omit to let the cell flex. */
+    width?: number;
+    /** Flex-grow weight when `width` is not set. @default 1 */
+    flex?: number;
+    /** Drop the right divider (used for the last column). @default false */
+    isLastColumn?: boolean;
+    /** Drop the bottom divider (used for the last row). @default false */
+    isLastRow?: boolean;
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * A single body cell. White background with a bottom + right divider, matching
+ * the Figma `table-cell` sub-component. String/number children are rendered
+ * with the token label style; any element is rendered as-is.
+ */
+declare function TableCell({ children, align, width, flex, isLastColumn, isLastRow, modes, style, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export type TableHeaderCellProps = {
+    children?: React.ReactNode;
+    /** Horizontal alignment of the header content. @default 'left' */
+    align?: TableCellAlign;
+    /** Fixed cell width. Omit to let the cell flex. */
+    width?: number;
+    /** Flex-grow weight when `width` is not set. @default 1 */
+    flex?: number;
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * A single header cell. Muted background with the bold token label style,
+ * matching the Figma `table header wrap` sub-component. Header cells carry no
+ * dividers; the header row draws a single bottom divider beneath them.
+ */
+declare function TableHeaderCell({ children, align, width, flex, modes, style, }: TableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+export type TableHeaderProps = {
+    children?: React.ReactNode;
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+declare function TableHeader({ children, modes, style }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type TableRowProps = {
+    children?: React.ReactNode;
+    /** When provided, the whole row becomes pressable. */
+    onPress?: () => void;
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+declare function TableRow({ children, onPress, modes, style }: TableRowProps): import("react/jsx-runtime").JSX.Element;
+export type TableBodyProps = {
+    children?: React.ReactNode;
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+declare function TableBody({ children, modes, style }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Column definition for the data-driven `Table` API. `T` is the shape of one
+ * row record.
+ */
+export type TableColumn<T> = {
+    /** Stable key; also used to read `row[key]` when no `render` is provided. */
+    key: string;
+    /** Header label. Defaults to `key`. */
+    header?: React.ReactNode;
+    /** Cell + header horizontal alignment. @default 'left' */
+    align?: TableCellAlign;
+    /** Header-only alignment override. Defaults to `align`. */
+    headerAlign?: TableCellAlign;
+    /** Fixed column width. Omit to let the column flex. */
+    width?: number;
+    /** Flex-grow weight when `width` is not set. @default 1 */
+    flex?: number;
+    /** Custom cell renderer. Falls back to `row[key]` as text. */
+    render?: (row: T, rowIndex: number) => React.ReactNode;
+};
+export type TableProps<T = Record<string, unknown>> = {
+    /** Column definitions for the data-driven API. */
+    columns?: TableColumn<T>[];
+    /** Row records, one per table row. */
+    data?: T[];
+    /**
+     * Composition children (`Table.Header`, `Table.Body`, `Table.Row`,
+     * `Table.Cell`, `Table.HeaderCell`). When provided, `columns`/`data` are
+     * ignored and the children are rendered as-is.
+     */
+    children?: React.ReactNode;
+    /** Show the header row in the data-driven API. @default true */
+    showHeader?: boolean;
+    /** Resolve a stable key per row. Defaults to the row index. */
+    getRowKey?: (row: T, index: number) => React.Key;
+    /** Called when a row is pressed (data-driven API). Makes rows pressable. */
+    onRowPress?: (row: T, index: number) => void;
+    /**
+     * Wrap the table in a horizontal `ScrollView`. Use with fixed-width columns
+     * for wide tables that exceed the viewport on mobile. @default false
+     */
+    scrollable?: boolean;
+    /** Accessibility label for the table container. */
+    accessibilityLabel?: string;
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Modes;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Table renders structured rows and columns. It supports two complementary
+ * usage styles that share the same token-driven styling:
+ *
+ * 1. **Data-driven** (recommended): pass `columns` + `data`. The header and body
+ *    are built for you, columns stay aligned, and per-column `align`/`width`/
+ *    `flex`/`render` give full control.
+ *
+ * 2. **Composition**: pass `Table.Header` / `Table.Body` / `Table.Row` /
+ *    `Table.Cell` / `Table.HeaderCell` as children for bespoke layouts. These
+ *    sub-components are also exported standalone.
+ *
+ * Implementation of Figma node `5732:3710` (`Table`) with sub-components
+ * `603:23` (`table-cell`) and `603:21` (`table header wrap`).
+ *
+ * @component
+ */
+declare function Table<T = Record<string, unknown>>({ columns, data, children, showHeader, getRowKey, onRowPress, scrollable, accessibilityLabel, modes, style, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace Table {
+    var Header: typeof TableHeader;
+    var HeaderCell: typeof TableHeaderCell;
+    var Body: typeof TableBody;
+    var Row: typeof TableRow;
+    var Cell: typeof TableCell;
+}
+export { TableHeader, TableHeaderCell, TableBody, TableRow, TableCell };
+export default Table;
+//# sourceMappingURL=Table.d.ts.map

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

@@ -21,6 +21,12 @@ export type TextProps = {
     style?: StyleProp<TextStyle>;
     /** Number of lines to limit the text to. */
     numberOfLines?: number;
+    /**
+     * When `true`, disables text truncation entirely: the trailing ellipsis (`…`)
+     * is never shown and any `numberOfLines` clamp is ignored, so the text wraps
+     * to as many lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
     /**
      * Explicit per-instance loading override. When `true`, this `Text` renders
      * a skeleton placeholder regardless of any surrounding `<SkeletonGroup>`.
@@ -41,6 +47,6 @@ export type TextProps = {
      */
     skeletonLines?: number;
 };
-declare function Text({ text, children, textAlign, modes, style, numberOfLines, loading, skeletonWidth, skeletonLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ text, children, textAlign, modes, style, numberOfLines, disableTruncation, loading, skeletonWidth, skeletonLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
 export default Text;
 //# sourceMappingURL=Text.d.ts.map