jfs-components 0.0.3 → 0.0.4

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/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-21T10:51:56.970Z
  */
 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.4",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -95,12 +95,14 @@
     "@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",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.7",
     "@types/react-native": "^0.73.0",
+    "@types/styled-components": "^5.1.36",
     "@typescript-eslint/eslint-plugin": "^8.50.0",
     "@typescript-eslint/parser": "^8.50.0",
     "babel-loader": "^10.0.0",
@@ -124,6 +126,7 @@
     "react-test-renderer": "19.1.1",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.0.8",
+    "styled-components": "^6.3.8",
     "ts-migrate": "^0.1.35",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
@@ -133,4 +136,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
+}

package/src/components/.token-metadata.json

@@ -1,4 +1,35 @@
 {
+  "Accordion": {
+    "tokens": [
+      "accordion/border/color",
+      "accordion/content/gap",
+      "accordion/content/padding/bottom",
+      "accordion/content/padding/top",
+      "accordion/header/background",
+      "accordion/header/gap",
+      "accordion/header/padding/vertical",
+      "accordion/icon/color",
+      "accordion/icon/size",
+      "accordion/title/color",
+      "accordion/title/fontFamily",
+      "accordion/title/fontSize",
+      "accordion/title/lineHeight"
+    ],
+    "collections": {
+      "Accordion States": {
+        "modes": [
+          "Idle",
+          "Hover",
+          "Open",
+          "Open Hover",
+          "Disabled"
+        ],
+        "defaultMode": "Idle",
+        "hasMultipleModes": true
+      }
+    },
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/Accordion/Accordion.tsx"
+  },
   "ActionFooter": {
     "tokens": [
       "actionFooter/background",
@@ -10,6 +41,31 @@
     "collections": {},
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/ActionFooter/ActionFooter.tsx"
   },
+  "ActionTile": {
+    "tokens": [
+      "actionTile/background",
+      "actionTile/fontFamily",
+      "actionTile/fontSize",
+      "actionTile/fontWeight",
+      "actionTile/foreground",
+      "actionTile/gap",
+      "actionTile/lineHeight",
+      "actionTile/padding/horizontal",
+      "actionTile/padding/vertical",
+      "actionTile/radius"
+    ],
+    "collections": {
+      "Color Mode": {
+        "modes": [
+          "Light",
+          "Dark"
+        ],
+        "defaultMode": "Light",
+        "hasMultipleModes": true
+      }
+    },
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/ActionTile/ActionTile.tsx"
+  },
   "AppBar": {
     "tokens": [
       "appBarActions/actions/gap",
@@ -317,6 +373,26 @@
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/CardFeedback/CardFeedback.tsx"
   },
+  "CtaCard": {
+    "tokens": [
+      "ctaCard/background",
+      "ctaCard/body/color",
+      "ctaCard/body/fontFamily",
+      "ctaCard/body/fontSize",
+      "ctaCard/body/lineHeight",
+      "ctaCard/content/gap",
+      "ctaCard/gap",
+      "ctaCard/padding/horizontal",
+      "ctaCard/padding/vertical",
+      "ctaCard/radius",
+      "ctaCard/title/color",
+      "ctaCard/title/fontFamily",
+      "ctaCard/title/fontSize",
+      "ctaCard/title/lineHeight"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/CtaCard/CtaCard.tsx"
+  },
   "Disclaimer": {
     "tokens": [
       "disclaimer/color",
@@ -852,6 +928,29 @@
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/TextInput/TextInput.tsx"
   },
+  "ThreadHero": {
+    "tokens": [
+      "threadHero/caption/color",
+      "threadHero/caption/fontFamily",
+      "threadHero/caption/fontSize",
+      "threadHero/caption/fontWeight",
+      "threadHero/caption/lineHeight",
+      "threadHero/details/gap",
+      "threadHero/gap",
+      "threadHero/subtitle/color",
+      "threadHero/subtitle/fontFamily",
+      "threadHero/subtitle/fontSize",
+      "threadHero/subtitle/fontWeight",
+      "threadHero/subtitle/lineHeight",
+      "threadHero/title/color",
+      "threadHero/title/fontFamily",
+      "threadHero/title/fontSize",
+      "threadHero/title/fontWeight",
+      "threadHero/title/lineHeight"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/ThreadHero/ThreadHero.tsx"
+  },
   "Tooltip": {
     "tokens": [
       "maxWidth",
@@ -879,6 +978,68 @@
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/Tooltip/Tooltip.tsx"
   },
+  "TransactionBubble": {
+    "tokens": [
+      "transactionBubble/background",
+      "transactionBubble/border/color",
+      "transactionBubble/border/size",
+      "transactionBubble/description/color",
+      "transactionBubble/description/fontFamily",
+      "transactionBubble/description/fontSize",
+      "transactionBubble/description/lineHeight",
+      "transactionBubble/gap",
+      "transactionBubble/padding",
+      "transactionBubble/radius",
+      "transactionBubble/statusWrap/height"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/TransactionBubble/TransactionBubble.tsx"
+  },
+  "TransactionDetails": {
+    "tokens": [
+      "detailItem/gap",
+      "detailItem/label/color",
+      "detailItem/label/fontFamily",
+      "detailItem/label/fontSize",
+      "detailItem/label/fontWeight",
+      "detailItem/label/lineHeight",
+      "detailItem/value/color",
+      "detailItem/value/fontFamily",
+      "detailItem/value/fontSize",
+      "detailItem/value/fontWeight",
+      "detailItem/value/lineHeight",
+      "transationDetails/gap",
+      "transationDetails/padding/horizontal",
+      "transationDetails/padding/vertical"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/TransactionDetails/TransactionDetails.tsx"
+  },
+  "TransactionStatus": {
+    "tokens": [
+      "transactionBubble/statusWrap/gap",
+      "transactionStatus/color",
+      "transactionStatus/fontFamily",
+      "transactionStatus/fontSize",
+      "transactionStatus/fontWeight2",
+      "transactionStatus/icon/color",
+      "transactionStatus/iconSize",
+      "transactionStatus/lineHeight"
+    ],
+    "collections": {
+      "Transaction Status": {
+        "modes": [
+          "Request",
+          "Paid",
+          "Declined",
+          "Expired"
+        ],
+        "defaultMode": "Request",
+        "hasMultipleModes": true
+      }
+    },
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/TransactionStatus/TransactionStatus.tsx"
+  },
   "UpiHandle": {
     "tokens": [
       "upiHandle/background",