jfs-components 0.0.3 → 0.0.5

package/lib/typescript/Containers.d.ts

@@ -1,2 +1,3 @@
-export declare const storyContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+import { type ViewProps } from 'react-native';
+export declare const storyContainer: (props: ViewProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Containers.d.ts.map

package/lib/typescript/Containers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../src/Containers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,+KAK1B,CAAA"}
+{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../src/Containers.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,eAAO,MAAM,cAAc,GAAI,OAAO,SAAS,4CAE9C,CAAC"}

package/lib/typescript/components/Accordion/Accordion.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle, type AccessibilityState } from 'react-native';
+import { type WebAccessibilityProps } from '../../utils/web-platform-utils';
+export type AccordionProps = {
+    /** The accordion header title */
+    title?: string;
+    /** Initial expanded state. Defaults to false (collapsed) */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state. When provided, the component becomes controlled */
+    expanded?: boolean;
+    /** Callback fired when the accordion's expanded state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Whether the accordion is disabled */
+    disabled?: boolean;
+    /** Content to display when the accordion is expanded (Figma Slot: 'content') */
+    children?: React.ReactNode;
+    /** Modes object passed to getVariableByName for all design tokens */
+    modes?: Record<string, any>;
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for screen readers. If not provided, uses title */
+    accessibilityLabel?: string;
+    /** Additional accessibility hint for screen readers */
+    accessibilityHint?: string;
+    /** Additional accessibility state information */
+    accessibilityState?: AccessibilityState;
+    /** Web-specific accessibility props (only used on web platform) */
+    webAccessibilityProps?: WebAccessibilityProps;
+} & React.ComponentProps<typeof View>;
+/**
+ * Accordion component that mirrors the Figma "Accordion" component.
+ *
+ * This component supports:
+ *  - **Expandable/collapsible content** with smooth animation
+ *  - **States**: Idle, Hover, Open, Disabled
+ *  - **Slot** for custom content
+ *  - **Design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "content" → `children`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.title='Accordion title'] - The accordion header title
+ * @param {boolean} [props.defaultExpanded=false] - Initial expanded state
+ * @param {boolean} [props.expanded] - Controlled expanded state
+ * @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
+ * @param {boolean} [props.disabled=false] - Whether the accordion is disabled
+ * @param {React.ReactNode} [props.children] - Content to display when expanded
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the accordion. If not provided, uses title
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+declare function Accordion({ title, defaultExpanded, expanded: controlledExpanded, onExpandedChange, disabled, children, modes, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export default Accordion;
+//# sourceMappingURL=Accordion.d.ts.map

package/lib/typescript/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EACL,IAAI,EAMJ,KAAK,SAAS,EACd,KAAK,SAAS,EAEd,KAAK,kBAAkB,EACxB,MAAM,cAAc,CAAA;AAGrB,OAAO,EAA0B,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAmDnG,MAAM,MAAM,cAAc,GAAG;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,mEAAmE;IACnE,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAyB,EACzB,eAAuB,EACvB,QAAQ,EAAE,kBAAkB,EAC5B,gBAAgB,EAChB,QAAgB,EAChB,QAAQ,EACR,KAAU,EACV,KAAK,EACL,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,IAAI,EACR,EAAE,cAAc,2CA8IhB;AAED,eAAe,SAAS,CAAA"}

package/lib/typescript/components/ActionTile/ActionTile.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+export type ActionTileProps = {
+    /** Label text, e.g. "Cards" */
+    label?: string;
+    /**
+     * Icon component slot.
+     * Expects an IconCapsule or compatible component.
+     * Modes will be passed to this slot if it's a valid React element.
+     */
+    icon?: React.ReactNode;
+    /** Modes for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style */
+    style?: ViewStyle;
+    /** Callback when tile is pressed */
+    onPress?: () => void;
+};
+/**
+ * ActionTile component from Figma design.
+ * Displays an icon (defaulting to IconCapsule) and a label.
+ *
+ * @component
+ */
+export default function ActionTile({ label, icon, modes, style, onPress, }: ActionTileProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ActionTile.d.ts.map

package/lib/typescript/components/ActionTile/ActionTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionTile.d.ts","sourceRoot":"","sources":["../../../../src/components/ActionTile/ActionTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAc,KAAK,SAAS,EAAoC,MAAM,cAAc,CAAA;AAI3F,MAAM,MAAM,eAAe,GAAG;IAC1B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAe,EACf,IAAI,EACJ,KAAU,EACV,KAAK,EACL,OAAO,GACV,EAAE,eAAe,2CAiEjB"}

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

@@ -0,0 +1,2 @@
+export { default } from './ActionTile';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/ActionTile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ActionTile/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/lib/typescript/components/CtaCard/CtaCard.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+type CtaCardProps = {
+    /**
+     * Title text for the card
+     */
+    title?: string;
+    /**
+     * Body text for the card
+     */
+    body?: string;
+    /**
+     * Name of the icon to display in the IconCapsule (if iconSlot is not provided)
+     */
+    iconName?: string;
+    /**
+     * Label for the button (if buttonSlot is not provided)
+     */
+    buttonLabel?: string;
+    /**
+     * Callback for the button press (if buttonSlot is not provided)
+     */
+    onPressButton?: () => void;
+    /**
+     * Modes object for design token resolution
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional custom slot for the icon area.
+     * If provided, overrides the default IconCapsule.
+     * `modes` will be automatically passed to this slot if it's a valid React element.
+     */
+    iconSlot?: React.ReactNode;
+    /**
+     * Optional custom slot for the title area.
+     * If provided, overrides the default title Text.
+     * `modes` will be automatically passed to this slot if it's a valid React element.
+     */
+    titleSlot?: React.ReactNode;
+    /**
+     * Optional custom slot for the body area.
+     * If provided, overrides the default body Text.
+     * `modes` will be automatically passed to this slot if it's a valid React element.
+     */
+    bodySlot?: React.ReactNode;
+    /**
+     * Optional custom slot for the button area.
+     * If provided, overrides the default Button.
+     * `modes` will be automatically passed to this slot if it's a valid React element.
+     */
+    buttonSlot?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * CtaCard component that maps directly to the Figma design using design tokens.
+ *
+ * @component
+ */
+declare function CtaCard({ title, body, iconName, buttonLabel, onPressButton, modes, iconSlot, titleSlot, bodySlot, buttonSlot, style, }: CtaCardProps): import("react/jsx-runtime").JSX.Element;
+export default CtaCard;
+//# sourceMappingURL=CtaCard.d.ts.map

package/lib/typescript/components/CtaCard/CtaCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CtaCard.d.ts","sourceRoot":"","sources":["../../../../src/components/CtaCard/CtaCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAC;AAK1F,KAAK,YAAY,GAAG;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAEF;;;;GAIG;AACH,iBAAS,OAAO,CAAC,EACb,KAAiC,EACjC,IAAyC,EACzC,QAA0B,EAC1B,WAA2B,EAC3B,aAAa,EACb,KAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,KAAK,GACR,EAAE,YAAY,2CA0Gd;AAED,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default } from './CtaCard';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/CtaCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CtaCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/lib/typescript/components/ThreadHero/ThreadHero.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+export type ThreadHeroProps = {
+    /** Title text, e.g. "Subhash Rajan" */
+    title?: string;
+    /** Subtitle text, e.g. "Banking name: SHIVASHANKAR RAJAN" */
+    subtitle?: string;
+    /** Optional caption text below the details, e.g. "+91 00000 00000" */
+    caption?: string;
+    /** Slot for Avatar component */
+    renderAvatar?: ReactNode;
+    /** Modes for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style */
+    style?: ViewStyle;
+};
+/**
+ * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
+ */
+export default function ThreadHero({ title, subtitle, caption, renderAvatar, modes, style, }: ThreadHeroProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThreadHero.d.ts.map

package/lib/typescript/components/ThreadHero/ThreadHero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadHero.d.ts","sourceRoot":"","sources":["../../../../src/components/ThreadHero/ThreadHero.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAc,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAA;AAGzE,MAAM,MAAM,eAAe,GAAG;IAC1B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAuB,EACvB,QAA6C,EAC7C,OAAO,EACP,YAAY,EACZ,KAAU,EACV,KAAK,GACR,EAAE,eAAe,2CA8FjB"}

package/lib/typescript/components/TransactionBubble/TransactionBubble.d.ts

@@ -0,0 +1,24 @@
+import { type ViewStyle } from 'react-native';
+export type TransactionBubbleProps = {
+    /** Description text, e.g. "Payment to Uber India" */
+    description?: string;
+    /** Money amount */
+    amount?: string | number;
+    /** Currency code or symbol */
+    currency?: string;
+    /** Transaction status text, e.g. "Expired" */
+    status?: string;
+    /** Date/time string associated with status */
+    statusDate?: string;
+    /** Modes for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style */
+    style?: ViewStyle;
+};
+/**
+ * TransactionBubble component displaying transaction details in a bubble card.
+ *
+ * @component
+ */
+export default function TransactionBubble({ description, amount, currency, status, statusDate, modes, style, }: TransactionBubbleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TransactionBubble.d.ts.map

package/lib/typescript/components/TransactionBubble/TransactionBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/TransactionBubble/TransactionBubble.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAA;AAMzE,MAAM,MAAM,sBAAsB,GAAG;IACjC,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,WAAqC,EACrC,MAAa,EACb,QAAc,EACd,MAAkB,EAClB,UAA0B,EAC1B,KAAU,EACV,KAAK,GACR,EAAE,sBAAsB,2CA2ExB"}

package/lib/typescript/components/TransactionDetails/TransactionDetails.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+export type TransactionDetailsItemProps = {
+    /** The label text displayed above the value (e.g., "UPI transaction ID") */
+    label?: string;
+    /** The value text displayed below the label (e.g., "101674916166") */
+    value?: string;
+    /** Modes object passed to `getVariableByName` for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>;
+    /** Optional label text style overrides */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Optional value text style overrides */
+    valueStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+} & React.ComponentProps<typeof View>;
+export type TransactionDetailsProps = {
+    /** Slot for TransactionDetails.Item children */
+    children?: React.ReactNode;
+    /** Modes object passed to `getVariableByName` for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string;
+} & React.ComponentProps<typeof View>;
+/**
+ * TransactionDetails component that displays a list of transaction detail items.
+ *
+ * This component serves as a container for TransactionDetails.Item children, applying consistent
+ * spacing and padding as defined by Figma design tokens.
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} [props.children] - TransactionDetails.Item children to render.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers.
+ *
+ * @example
+ * ```tsx
+ * <TransactionDetails modes={{ 'Color Mode': 'Light' }}>
+ *   <TransactionDetails.Item label="UPI transaction ID" value="101674916166" />
+ *   <TransactionDetails.Item label="From" value="JioFinance • shivashankar@okjio" />
+ *   <TransactionDetails.Item label="To" value="JioFinance • shivashankar@okjio" />
+ *   <TransactionDetails.Item label="Payment method" value="UPI" />
+ * </TransactionDetails>
+ * ```
+ */
+declare function TransactionDetails({ children, modes, style, accessibilityLabel, ...rest }: TransactionDetailsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TransactionDetails {
+    var Item: ({ label, value, modes, style, labelStyle, valueStyle, accessibilityLabel, ...rest }: TransactionDetailsItemProps) => import("react/jsx-runtime").JSX.Element;
+}
+export default TransactionDetails;
+//# sourceMappingURL=TransactionDetails.d.ts.map

package/lib/typescript/components/TransactionDetails/TransactionDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/TransactionDetails/TransactionDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AA4CzF,MAAM,MAAM,2BAA2B,GAAG;IACxC,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACjC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACjC,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AAqGrC,MAAM,MAAM,uBAAuB,GAAG;IACpC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AAErC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,KAAU,EACV,KAAK,EACL,kBAAkB,EAClB,GAAG,IAAI,EACR,EAAE,uBAAuB,2CA6BzB;kBAnCQ,kBAAkB;oGA9GxB,2BAA2B;;AAsJ9B,eAAe,kBAAkB,CAAA"}

package/lib/typescript/components/TransactionStatus/TransactionStatus.d.ts

@@ -0,0 +1,16 @@
+import { type ViewStyle } from 'react-native';
+export type TransactionStatusProps = {
+    /** Status text, e.g. "Expired" */
+    status?: string;
+    /** Date text, e.g. "20 Mar 2025" */
+    date?: string;
+    /** Modes for design token resolution */
+    modes?: Record<string, any>;
+    /** Optional container style */
+    style?: ViewStyle;
+};
+/**
+ * TransactionStatus component displaying status icon, label, and date.
+ */
+export default function TransactionStatus({ status, date, modes, style, }: TransactionStatusProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TransactionStatus.d.ts.map

package/lib/typescript/components/TransactionStatus/TransactionStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionStatus.d.ts","sourceRoot":"","sources":["../../../../src/components/TransactionStatus/TransactionStatus.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAA;AAsCzE,MAAM,MAAM,sBAAsB,GAAG;IACjC,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,MAAkB,EAClB,IAAoB,EACpB,KAAU,EACV,KAAK,GACR,EAAE,sBAAsB,2CAmCxB"}

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

@@ -11,6 +11,7 @@ export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
+export { default as CtaCard } from './CtaCard/CtaCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
@@ -27,6 +28,10 @@ export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
 export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
+export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
 export { Tooltip } from './Tooltip/Tooltip';
+export { default as TransactionBubble } from './TransactionBubble/TransactionBubble';
+export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
+export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as UpiHandle } from './UpiHandle/UpiHandle';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/typescript/design-tokens/JFSThemeProvider.d.ts

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react';
+/**
+ * Shape of the TokenContext
+ */
+interface TokenContextType {
+    /**
+     * Current active modes map
+     * @example { 'Color Mode': 'Dark', 'Platform': 'mobile' }
+     */
+    modes: Record<string, any>;
+    /**
+     * Helper to resolve variable by name using the current context modes.
+     */
+    getVariable: (name: string) => any;
+}
+interface JFSThemeProviderProps {
+    /**
+     * Modes to apply globally.
+     * Can be used to set 'Color Mode', 'Platform', 'Density', etc.
+     */
+    modes?: Record<string, any>;
+    children: ReactNode;
+}
+/**
+ * Provider component for the JFS Design System.
+ * Wraps your application or a subtree to provide global configuration for design tokens.
+ *
+ * @example
+ * <JFSThemeProvider modes={{ 'Color Mode': 'Dark', 'Platform': 'web' }}>
+ *   <App />
+ * </JFSThemeProvider>
+ */
+export declare const JFSThemeProvider: React.FC<JFSThemeProviderProps>;
+/**
+ * Hook to access the current design token context.
+ *
+ * returns {
+ *   modes: Record<string, any> - The current active modes
+ *   getVariable: (name: string) => any - Function to resolve a token value
+ * }
+ */
+export declare const useTokens: () => TokenContextType;
+export {};
+//# sourceMappingURL=JFSThemeProvider.d.ts.map

package/lib/typescript/design-tokens/JFSThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JFSThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/design-tokens/JFSThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAW,MAAM,OAAO,CAAC;AAG7E;;GAEG;AACH,UAAU,gBAAgB;IACtB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CACtC;AAID,UAAU,qBAAqB;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmB5D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,QAAO,gBAU5B,CAAC"}

package/lib/typescript/design-tokens/index.d.ts

@@ -1,2 +1,3 @@
 export * from './figma-variables-resolver';
+export * from './JFSThemeProvider';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/design-tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC"}

package/lib/typescript/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-01-19T09:31:13.862Z
+ * Generated: 2026-01-22T08:22:14.301Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -77,8 +77,7 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*",
-    "styled-components": "*"
+    "react-native": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -95,6 +94,7 @@
     "@react-native/metro-config": "0.82.1",
     "@storybook/addon-docs": "^10.0.8",
     "@storybook/addon-links": "^10.0.8",
+    "@storybook/blocks": "^8.6.14",
     "@storybook/manager-api": "^8.6.14",
     "@storybook/react-native": "^10.0.7",
     "@storybook/react-webpack5": "^10.0.8",
@@ -104,7 +104,6 @@
     "@typescript-eslint/eslint-plugin": "^8.50.0",
     "@typescript-eslint/parser": "^8.50.0",
     "babel-loader": "^10.0.0",
-    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.39.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",

package/src/Containers.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View, StyleSheet, type ViewProps } from 'react-native';
+
+export const storyContainer = (props: ViewProps) => (
+  <View style= { styles.container } { ...props } />
+);
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});