jfs-components 0.0.78 → 0.0.84

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

@@ -19,8 +19,19 @@ export type AppBarProps = {
     /**
      * Slot for the middle content.
      * Often used for "Page Title" in SubPage.
+     *
+     * On `SubPage` this is rendered as an absolutely-centered box (matching the
+     * Figma "slot wrap"): it stays centered in the bar regardless of how wide
+     * the leading/actions slots are, and its content fills/shrinks responsively
+     * within {@link middleSlotWidth}.
      */
     middleSlot?: React.ReactNode;
+    /**
+     * Width of the centered `SubPage` middle slot, in px.
+     * Defaults to the Figma value (192). Has no effect on `MainPage`.
+     * @default 192
+     */
+    middleSlotWidth?: number;
     /**
      * Slot for the actions on the right.
      */
@@ -40,6 +51,6 @@ export type AppBarProps = {
     accessibilityLabel?: string;
     accessibilityHint?: string;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
-export default function AppBar({ type, leadingSlot, middleSlot, actionsSlot, modes: propModes, onLeadingPress, style, accessibilityLabel, accessibilityHint, ...rest }: AppBarProps): import("react/jsx-runtime").JSX.Element;
+export default function AppBar({ type, leadingSlot, middleSlot, middleSlotWidth, actionsSlot, modes: propModes, onLeadingPress, style, accessibilityLabel, accessibilityHint, ...rest }: AppBarProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=AppBar.d.ts.map

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+/**
+ * Anchor point on the main content where the attached `badge` is centered.
+ * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
+ */
+export type AttachedPosition = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+export type AttachedProps = Omit<ViewProps, 'children'> & {
+    /**
+     * Main content the badge attaches to (the Figma "main slot"). Any node —
+     * typically an `IconCapsule`, `Avatar`, image, etc. `modes` are cascaded to
+     * every child via {@link cloneChildrenWithModes}.
+     */
+    children?: React.ReactNode;
+    /**
+     * The element attached on top of `children` (the Figma "slot"). Centered on
+     * the anchor point given by `position` so it straddles the edge/corner.
+     * `modes` are cascaded into it as well.
+     */
+    badge?: React.ReactNode;
+    /**
+     * Enforces a fixed square size (in px) on the `badge` slot, regardless of
+     * what node is passed. The badge is wrapped in a box of
+     * `badgeSize × badgeSize` with `overflow: 'hidden'`, and the badge content is
+     * stretched to fill it. Use this to guarantee the design-token size even when
+     * a consumer drops in an arbitrary node (e.g. an `Image`) whose intrinsic
+     * size/aspect-ratio would otherwise win.
+     *
+     * When omitted, the badge keeps its own intrinsic size (legacy behavior).
+     */
+    badgeSize?: number;
+    /**
+     * Corner radius used to clip the `badge` box. Only applies when `badgeSize`
+     * is set. Anything that overflows the rounded box (e.g. a non-square image)
+     * is clipped.
+     * @default badgeSize / 2 (a full circle)
+     */
+    badgeRadius?: number;
+    /**
+     * Anchor point for the `badge` relative to the main content.
+     * @default 'bottom-right'
+     */
+    position?: AttachedPosition;
+    /**
+     * How the anchor point is computed for diagonal (corner) positions:
+     * - `false` (default): treat the main content as a **square** — corner
+     *   anchors sit on the bounding-box corners.
+     * - `true`: treat the main content as a **circle** inscribed in its bounding
+     *   box — corner anchors sit on the circle's circumference (the 45° point),
+     *   so badges hug round content like a circular `IconCapsule` or `Avatar`.
+     *
+     * Edge (`top`/`bottom`/`left`/`right`) and `center` anchors are unaffected,
+     * since the circle meets the bounding box at those points.
+     * @default false
+     */
+    circular?: boolean;
+    /** Mode configuration cascaded to the token resolver and all children. */
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+declare function Attached({ children, badge, badgeSize, badgeRadius, position, circular, modes: propModes, style, ...rest }: AttachedProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Attached>;
+export default _default;
+//# sourceMappingURL=Attached.d.ts.map

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 export interface CardProps {
+    /**
+     * Content rendered in the header slot at the top of the card (e.g. a brand logo).
+     * Sits above the media slot, with its own padding.
+     */
+    header?: React.ReactNode;
     /**
      * The content to be rendered in the media slot (e.g. an Image).
      * This content is wrapped in a container that respects the `aspectRatio`.
@@ -28,16 +33,18 @@ export interface CardProps {
  * Card component implementation from Figma node 765:6186.
  *
  * Supports a `media` slot (with aspect ratio) and a content area.
+ * Supports an optional `header` slot (e.g. a brand logo), a `media` slot
+ * (with aspect ratio) and a content area.
  * Usage:
  * ```tsx
- * <Card media={<Image source={...} />} modes={modes}>
+ * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
  * </Card>
  * ```
  */
-export declare function Card({ media, children, modes, mediaAspectRatio, style, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ header, media, children, modes, mediaAspectRatio, style, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Card {
     var Title: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;
     var SupportText: ({ children, style, modes: propModes }: CardTextProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -73,8 +73,9 @@ export type DropdownInputProps = {
      */
     menuMaxHeight?: number;
     /**
-     * Pixel offset between the trigger and the popup. Defaults to 4 so the
-     * popup visually peeks below the input.
+     * Pixel gap between the trigger and the popup. When omitted, it defaults
+     * to the `formField/gap` design token so the menu sits the same distance
+     * below the input as the rest of the field's internal spacing.
      */
     menuOffset?: number;
     /**

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

@@ -6,8 +6,16 @@ type ListItemProps = {
     title?: string;
     supportText?: string;
     showSupportText?: boolean;
-    leading?: React.ReactNode;
+    /** Leading slot (Figma "leading"). Omitted or `null` renders nothing. */
+    leading?: React.ReactNode | null;
     supportSlot?: React.ReactNode;
+    /** Trailing slot (Figma "trailing"), e.g. `MoneyValue` or `Button`. Horizontal layout only. */
+    trailing?: React.ReactNode;
+    /**
+     * @deprecated Renamed to `trailing` for a symmetric `leading` / `trailing`
+     * slot API. Still honored for backward compatibility; `trailing` wins when
+     * both are provided. Will be removed in a future major version.
+     */
     endSlot?: React.ReactNode;
     /** Whether to show the NavArrow on the far right (Horizontal layout only). Defaults to true. */
     navArrow?: boolean;
@@ -33,9 +41,11 @@ type ListItemProps = {
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
  * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
+ * dedicated React "slot" prop. The leading and trailing edges share a
+ * symmetric `leading` / `trailing` slot API:
+ *  - Slot "leading" → `leading`
  *  - Slot "support text" → `supportSlot`
- *  - Slot "end" → `endSlot`
+ *  - Slot "trailing" → `trailing`
  *
  * @component
  * @param {Object} props
@@ -43,9 +53,9 @@ type ListItemProps = {
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
+ * @param {React.ReactNode|null} [props.leading] - Optional leading slot. Omitted or `null` renders nothing.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
- * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
+ * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
  * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
@@ -67,7 +77,7 @@ type ListItemProps = {
  *    handlers stay referentially stable across renders.
  *  - The component is wrapped in `React.memo`.
  */
-declare function ListItemImpl({ layout, title, supportText, showSupportText, leading, supportSlot, endSlot, navArrow, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemImpl({ layout, title, supportText, showSupportText, leading, supportSlot, trailing, endSlot, navArrow, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 declare const ListItem: React.MemoExoticComponent<typeof ListItemImpl>;
 export default ListItem;
 //# sourceMappingURL=ListItem.d.ts.map

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

@@ -15,7 +15,11 @@ export type PaymentFeedbackProps = {
     iconName?: string;
     /** Optional custom media slot that replaces the default IconCapsule */
     renderMedia?: ReactNode;
-    /** Mode configuration for design tokens */
+    /**
+     * Mode configuration for design tokens. Also drives the default
+     * IconCapsule's color — pass `AppearanceSystem: 'positive' | 'warning' |
+     * 'negative'` to render a green/orange/red capsule (defaults to `positive`).
+     */
     modes?: Record<string, any>;
     style?: ViewStyle;
 };

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * A single plan column header (the label column has no header of its own).
+ */
+export type PlanComparisonColumn = {
+    /** Header text for the plan column. */
+    label: string;
+    /**
+     * Render the header in the brand accent colour (gold) — use it to
+     * highlight the recommended / upsell plan.
+     * @default false
+     */
+    brand?: boolean;
+};
+/**
+ * Value rendered inside a plan cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React node → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+export type PlanComparisonCellValue = string | number | boolean | null | undefined | React.ReactElement;
+export type PlanComparisonRow = {
+    /** Feature label shown in the first (left) column. */
+    label: string;
+    /**
+     * Show an info icon after the label. When `onInfoPress` is provided the
+     * icon becomes tappable; otherwise it is purely decorative.
+     */
+    showInfo?: boolean;
+    /** Handler for the info icon. Implies `showInfo`. */
+    onInfoPress?: () => void;
+    /**
+     * One value per plan column, in the same order as `columns`. See
+     * {@link PlanComparisonCellValue} for how each value is rendered.
+     */
+    values: PlanComparisonCellValue[];
+    /** Stable key. Falls back to the label / index. */
+    key?: React.Key;
+};
+export type PlanComparisonCardProps = {
+    /**
+     * Plan column headers (excludes the leading label column). The order here
+     * maps 1:1 to each row's `values` array.
+     */
+    columns?: PlanComparisonColumn[];
+    /** Feature rows compared across the plan columns. */
+    rows?: PlanComparisonRow[];
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Record<string, any>;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * PlanComparisonCard renders a compact comparison table that pits the user's
+ * current plan against one or more alternative plans across a set of feature
+ * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
+ *
+ * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
+ *
+ * @component
+ */
+declare function PlanComparisonCard({ columns, rows, modes, style, }: PlanComparisonCardProps): import("react/jsx-runtime").JSX.Element;
+export default PlanComparisonCard;
+//# sourceMappingURL=PlanComparisonCard.d.ts.map

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+export type SlotLayoutDirection = 'vertical' | 'horizontal';
+export type SlotProps = ViewProps & {
+    /**
+     * Content laid out inside the slot. `modes` are cascaded to every child via
+     * {@link cloneChildrenWithModes}.
+     */
+    children?: React.ReactNode;
+    /**
+     * Main-axis direction for slot children. Matches the Figma Slot variant:
+     * - `vertical` (default): stacks children in a column
+     * - `horizontal`: arranges children in a row
+     */
+    layoutDirection?: SlotLayoutDirection;
+    /**
+     * 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'];
+    /**
+     * Mode configuration passed to the token resolver and cascaded to children.
+     */
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Slot — a token-driven layout container for grouped slot content.
+ *
+ * Use `Slot` 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}>
+ *   <Slot layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Slot>
+ * </ActionFooter>
+ * ```
+ */
+declare function Slot({ children, layoutDirection, alignCrossAxis, justifyMainAxis, modes: propModes, style, ...rest }: SlotProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Slot>;
+export default _default;
+//# sourceMappingURL=Slot.d.ts.map

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

@@ -0,0 +1,45 @@
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+/**
+ * Per-segment colours, resolved from the Figma `spiner/*` tokens. Consumers can
+ * override any subset via the `colors` prop.
+ */
+export type SpinnerColors = {
+    /** Leading segment (front of the falling chain). */
+    primary?: string;
+    /** Middle segment. */
+    secondary?: string;
+    /** Trailing segment (tail of the chain). */
+    tertiary?: string;
+};
+type SpinnerBaseProps = Omit<ViewProps, 'children' | 'style'>;
+export type SpinnerProps = SpinnerBaseProps & {
+    /**
+     * Diameter in px. The spinner is always rendered at a 1:1 ratio, so a single
+     * size controls both width and height. Defaults to the Figma size (72).
+     */
+    size?: number;
+    /**
+     * Duration of one full clockwise revolution of the leading segment, in ms.
+     * Lower = faster. Defaults to 2400.
+     */
+    durationMs?: number;
+    /**
+     * "Weightiness" of the fall, in `[0, 0.9]`. 0 = perfectly constant speed;
+     * higher values make segments whip faster over the top and ease through the
+     * bottom. Kept below 1 so the motion never reverses. Defaults to 0.45.
+     */
+    gravity?: number;
+    /** Override any subset of the token-driven segment colours. */
+    colors?: SpinnerColors;
+    /** When false, renders a static resting spinner (also honoured for reduced motion). Defaults to true. */
+    animating?: boolean;
+    /** Design token modes forwarded to token lookups. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label announced to assistive tech. Defaults to "Loading". */
+    accessibilityLabel?: string;
+};
+declare function Spinner({ size, durationMs, gravity, colors, animating, modes: propModes, style, accessibilityLabel, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export default Spinner;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -1,5 +1,6 @@
 export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard';
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
+export { default as Attached, type AttachedProps, type AttachedPosition } from './Attached/Attached';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -63,6 +64,8 @@ export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Nump
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
+export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
+export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
 export { StepLabel, type StepLabelProps } from './Stepper/StepLabel';
@@ -110,6 +113,7 @@ export { default as AmountInput, type AmountInputProps } from './AmountInput/Amo
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
+export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';

package/lib/typescript/src/icons/components/IconArrowdown.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconArrowdown: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconArrowdown.d.ts.map

package/lib/typescript/src/icons/components/IconArrowup.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconArrowup: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconArrowup.d.ts.map

package/lib/typescript/src/icons/components/IconChevrondowncircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevrondowncircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevrondowncircle.d.ts.map

package/lib/typescript/src/icons/components/IconChevronleftcircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevronleftcircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevronleftcircle.d.ts.map

package/lib/typescript/src/icons/components/IconChevronrightcircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevronrightcircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevronrightcircle.d.ts.map

package/lib/typescript/src/icons/components/IconChevronupcircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevronupcircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevronupcircle.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavback.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavback: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavback.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavcenter.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavcenter: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavcenter.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavhome.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavhome: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavhome.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavtask.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavtask: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavtask.d.ts.map

package/lib/typescript/src/icons/components/IconSignin.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconSignin: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconSignin.d.ts.map

package/lib/typescript/src/icons/components/IconSignout.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconSignout: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconSignout.d.ts.map

package/lib/typescript/src/icons/components/index.d.ts

@@ -63,10 +63,12 @@ export * from './IconArmed';
 export * from './IconArmedoff';
 export * from './IconArmedpartially';
 export * from './IconArrowback';
+export * from './IconArrowdown';
 export * from './IconArrowline';
 export * from './IconArrowlinediagonal';
 export * from './IconArrowlinedot';
 export * from './IconArrownext';
+export * from './IconArrowup';
 export * from './IconArtificialinsemination';
 export * from './IconAssistivegrid';
 export * from './IconAstrology';
@@ -236,9 +238,13 @@ export * from './IconChemistry';
 export * from './IconCherry';
 export * from './IconChestpain';
 export * from './IconChevrondown';
+export * from './IconChevrondowncircle';
 export * from './IconChevronleft';
+export * from './IconChevronleftcircle';
 export * from './IconChevronright';
+export * from './IconChevronrightcircle';
 export * from './IconChevronup';
+export * from './IconChevronupcircle';
 export * from './IconChildrengame';
 export * from './IconCholesterol';
 export * from './IconCleaning';
@@ -757,6 +763,10 @@ export * from './IconOperatingtable';
 export * from './IconOperator';
 export * from './IconOrder';
 export * from './IconOrders';
+export * from './IconOsnavback';
+export * from './IconOsnavcenter';
+export * from './IconOsnavhome';
+export * from './IconOsnavtask';
 export * from './IconOtp';
 export * from './IconOutofstock';
 export * from './IconOutgoing';
@@ -953,6 +963,8 @@ export * from './IconShutter10s';
 export * from './IconShutter3s';
 export * from './IconShutter5s';
 export * from './IconSign';
+export * from './IconSignin';
+export * from './IconSignout';
 export * from './IconSim';
 export * from './IconSim1';
 export * from './IconSim2';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-05-29T10:37:24.494Z
+ * Generated: 2026-06-01T15:33:15.385Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.78",
+  "version": "0.0.84",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -40,7 +40,8 @@
     "icons:generate": "node scripts/generate-icon-registry.js",
     "prepare": "bob build",
     "build": "bob build",
-    "prepack": "yarn icons:generate && bob build"
+    "prepack": "yarn icons:generate && bob build",
+    "push:xpaydemo": "bash scripts/push-to-xpaydemo.sh"
   },
   "react-native-builder-bob": {
     "source": "src",