jfs-components 0.0.1

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

@@ -0,0 +1,45 @@
+import { type AccessibilityState, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
+type BottomNavItemProps = SafePressableProps & {
+    iconName?: string;
+    label?: string;
+    modes?: Record<string, any>;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    iconColor?: string;
+    iconSize?: number;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityState?: AccessibilityState;
+    /**
+     * Web-specific accessibility props (only used on web platform)
+     */
+    webAccessibilityProps?: WebAccessibilityProps;
+};
+/**
+ * Bottom navigation item with icon and label stacked vertically.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName`,
+ * with the `modes` object passed straight through (same pattern as the rest
+ * of the library). Defaults reflect the Figma design for the base state.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.iconName="ic_home"] - Icon name from the registry.
+ * @param {string} [props.label="Home"] - Text label displayed under the icon.
+ * @param {Object} [props.modes={}] - Modes object forwarded to token resolver.
+ * @param {Function} [props.onPress] - Optional press handler.
+ * @param {boolean} [props.disabled=false] - When true, lowers opacity and disables press.
+ * @param {Object} [props.style] - Optional style overrides for the outer container.
+ * @param {Object} [props.labelStyle] - Optional style overrides for the label text.
+ * @param {string} [props.iconColor] - Optional explicit icon color override.
+ * @param {number} [props.iconSize] - Optional explicit icon size override.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ */
+declare function BottomNavItem({ iconName, label, modes, onPress, disabled, style, labelStyle, iconColor: iconColorOverride, iconSize: iconSizeOverride, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: BottomNavItemProps): import("react/jsx-runtime").JSX.Element;
+export default BottomNavItem;
+//# sourceMappingURL=BottomNavItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNavItem.d.ts","sourceRoot":"","sources":["../../../../src/components/BottomNavItem/BottomNavItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AAGrB,OAAO,EAA0B,KAAK,kBAAkB,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAE5H,KAAK,kBAAkB,GAAG,kBAAkB,GAAG;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAoB,EACpB,KAAc,EACd,KAAU,EACV,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,EAAE,gBAAgB,EAC1B,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAsIpB;AAED,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { type AccessibilityState, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
+export type ButtonProps = SafePressableProps & {
+    label?: string;
+    children?: React.ReactNode;
+    /**
+     * Optional render prop for taking over the inner label/content while still
+     * reusing the token-driven text styles.
+     *
+     * When provided, this takes precedence over `children`. The `styles`
+     * argument is the merged text style (base token styles + `labelStyle`).
+     *
+     * Example:
+     * ```tsx
+     * <Button
+     *   renderContent={(styles) => (
+     *     <CustomText style={styles}>Pay now</CustomText>
+     *   )}
+     * />
+     * ```
+     */
+    renderContent?: (styles: StyleProp<TextStyle>) => React.ReactNode;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    modes?: Record<string, any>;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityState?: AccessibilityState;
+    /**
+     * Web-specific accessibility props (only used on web platform)
+     */
+    webAccessibilityProps?: WebAccessibilityProps;
+};
+/**
+ * Button component that maps directly to the Figma design using design tokens.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.label="Button"] - Label text to display when no children are provided
+ * @param {React.ReactNode} [props.children] - Optional custom content to render inside the button. When provided, this is treated as a full-content override and `label`/`labelStyle` are ignored.
+ * @param {Function} [props.renderContent] - Optional render prop that receives the merged label text styles and returns custom content. Preferred when you want custom content but still reuse the token-driven typography.
+ * @param {React.ReactNode} [props.leading] - Optional leading accessory (e.g., icon)
+ * @param {React.ReactNode} [props.trailing] - Optional trailing accessory (e.g., icon)
+ * @param {Object} [props.modes={}] - Mode configuration passed to the token resolver (e.g., {"Button / Size": "M"})
+ * @param {Function} [props.onPress] - Callback triggered when the button is pressed
+ * @param {boolean} [props.disabled=false] - When true, the button cannot be pressed
+ * @param {Object} [props.style] - Optional style overrides for the button container
+ * @param {Object} [props.labelStyle] - Optional style overrides for the label text
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label or children text
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ */
+declare function Button({ label, children, renderContent, leading, trailing, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAyB,KAAK,kBAAkB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7H,OAAO,EAA0B,KAAK,kBAAkB,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAE5H,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;;;;;;;;;OAeG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAClE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,MAAM,CAAC,EACd,KAAgB,EAChB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,IAAI,EACR,EAAE,WAAW,2CAmKb;AAED,eAAe,MAAM,CAAA"}

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+export interface CardProps {
+    /**
+     * The content to be rendered in the media slot (e.g. an Image).
+     * This content is wrapped in a container that respects the `aspectRatio`.
+     */
+    media?: React.ReactNode;
+    /**
+     * Content to render inside the card (e.g. Card.Title, Card.SupportText).
+     */
+    children?: React.ReactNode;
+    /**
+     * Modes object for token resolution (e.g. { "Mode": "Dark" }).
+     */
+    modes?: Record<string, any>;
+    /**
+     * Aspect ratio for the media slot container.
+     * Default is based on Figma design 154/116 (~1.328).
+     */
+    mediaAspectRatio?: number;
+    /**
+     * Style overrides for the card container.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Card component implementation from Figma node 765:6186.
+ *
+ * Supports a `media` slot (with aspect ratio) and a content area.
+ * Usage:
+ * ```tsx
+ * <Card 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 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;
+}
+export interface CardTextProps {
+    children?: React.ReactNode;
+    style?: StyleProp<TextStyle>;
+    modes?: Record<string, any>;
+}
+export default Card;
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2E,MAAM,OAAO,CAAC;AAChG,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUtG,MAAM,WAAW,SAAS;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACjB,KAAK,EACL,QAAQ,EACR,KAAU,EACV,gBAA4B,EAC5B,KAAK,GACR,EAAE,SAAS,2CA6DX;yBAnEe,IAAI;uDAmFkC,aAAa;6DA6BP,aAAa;;AAvCzE,MAAM,WAAW,aAAa;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/B;AA6DD,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+export interface CardFeedbackProps {
+    /**
+     * The main content of the card (Icon, Title, Body, Action).
+     */
+    children?: React.ReactNode;
+    /**
+     * Modes object for token resolution.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Style overrides for the card container.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * CardFeedback component from Figma node 1280:4481.
+ *
+ * Used for status updates, warnings, or feedback.
+ */
+export declare function CardFeedback({ children, modes, style, }: CardFeedbackProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardFeedback {
+    var Icon: typeof import("./CardFeedback").Icon;
+    var Content: typeof import("./CardFeedback").Content;
+    var Title: typeof import("./CardFeedback").Title;
+    var Body: typeof import("./CardFeedback").Body;
+    var Action: typeof import("./CardFeedback").Action;
+}
+/**
+ * Icon Wrapper
+ * Tokens: cardFeedback/icon/size, cardFeedback/icon/color
+ */
+export declare function Icon({ children, style, modes: propModes }: {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    modes?: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Content Wrapper (Text Wrap)
+ * Wraps Title, Body, and sometimes Action.
+ * Tokens: cardFeedback/text/gap
+ */
+export declare function Content({ children, style, modes: propModes }: {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    modes?: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Title Component
+ * Tokens: cardFeedback/title/*
+ */
+export declare function Title({ children, style, modes: propModes }: {
+    children?: React.ReactNode;
+    style?: StyleProp<TextStyle>;
+    modes?: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Body Component
+ * Tokens: cardFeedback/body/*
+ */
+export declare function Body({ children, style, modes: propModes }: {
+    children?: React.ReactNode;
+    style?: StyleProp<TextStyle>;
+    modes?: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Action Slot Wrapper
+ * Tokens: cardFeedback/actionSlot/gap
+ */
+export declare function Action({ children, style, modes: propModes }: {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    modes?: Record<string, any>;
+}): import("react/jsx-runtime").JSX.Element;
+export default CardFeedback;
+//# sourceMappingURL=CardFeedback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardFeedback.d.ts","sourceRoot":"","sources":["../../../../src/components/CardFeedback/CardFeedback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAS,MAAM,cAAc,CAAC;AAQ7G,MAAM,WAAW,iBAAiB;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EACzB,QAAQ,EACR,KAAU,EACV,KAAK,GACR,EAAE,iBAAiB,2CA2BnB;yBA/Be,YAAY;;;;;;;AAqC5B;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAuBpJ;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAWvJ;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBrJ;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBpJ;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBtJ;AASD,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+type DisclaimerProps = {
+    disclaimer?: string;
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+} & React.ComponentProps<typeof View>;
+/**
+ * Disclaimer text block that mirrors the Figma "Disclaimer" component.
+ *
+ * All visual attributes (color, typography, etc.) are resolved from
+ * Figma design tokens via `getVariableByName`, with an optional `modes`
+ * configuration object – exactly like other components in this library.
+ *
+ * The text is center‑aligned and constrained to the same width as in Figma,
+ * with two lines:
+ *  - A configurable disclaimer prefix
+ *  - A fixed "Jio Payments Bank Pvt. Ltd." line
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.disclaimer] - First line of the disclaimer text.
+ * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
+ * @param {Object} [props.style] - Optional style overrides for the container.
+ * @param {Object} [props.textStyle] - Optional style overrides for the text element.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses disclaimer text
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+declare function Disclaimer({ disclaimer, modes, style, textStyle, accessibilityLabel, accessibilityHint, ...rest }: DisclaimerProps): import("react/jsx-runtime").JSX.Element;
+export default Disclaimer;
+//# sourceMappingURL=Disclaimer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Disclaimer.d.ts","sourceRoot":"","sources":["../../../../src/components/Disclaimer/Disclaimer.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;AAGzF,KAAK,eAAe,GAAG;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,UAAU,CAAC,EAClB,UAAiF,EACjF,KAAU,EACV,KAAK,EACL,SAAS,EACT,kBAAkB,EAClB,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,eAAe,2CAsDjB;AAED,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+type DrawerItem = {
+    iconName?: string;
+    label?: string;
+    modes?: Record<string, any>;
+    onPress?: () => void;
+};
+type DrawerProps = {
+    items?: DrawerItem[];
+    modes?: Record<string, any>;
+    title?: string;
+    children?: React.ReactNode;
+    collapsedHeight?: number;
+    expandedRatio?: number;
+    initialState?: 'collapsed' | 'expanded';
+    contentStyle?: any;
+    sheetStyle?: any;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+};
+/**
+ * Lightweight bottom drawer/sheet with a draggable handle.
+ * No external dependencies; uses Animated + PanResponder so it works in RN and Storybook (web).
+ *
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the drawer. If not provided, uses title or "Drawer"
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+declare function Drawer({ items, modes, title, children, collapsedHeight, expandedRatio, initialState, contentStyle, sheetStyle, accessibilityLabel, accessibilityHint, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export default Drawer;
+//# sourceMappingURL=Drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAA;AAYzD,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,WAAW,GAAG,UAAU,CAAA;IACvC,YAAY,CAAC,EAAE,GAAG,CAAA;IAClB,UAAU,CAAC,EAAE,GAAG,CAAA;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAID;;;;;;GAMG;AACH,iBAAS,MAAM,CAAC,EACd,KAAU,EACV,KAAU,EACV,KAAK,EACL,QAAQ,EACR,eAAqB,EACrB,aAAoB,EACpB,YAA0B,EAC1B,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,WAAW,2CAyIb;AAuDD,eAAe,MAAM,CAAA"}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+type RenderInputArgs = {
+    placeholder: string;
+    value: string;
+    onChangeText?: ((text: string) => void) | undefined;
+    modes: Record<string, any>;
+    accessibilityLabel: string;
+    accessibilityHint?: string | undefined;
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+};
+type FilterBarProps = {
+    placeholder?: string;
+    value?: string;
+    onChangeText?: (text: string) => void;
+    children?: React.ReactNode;
+    /**
+     * Narrow override hook for the inner input. When provided, this takes
+     * precedence over `children` and receives the same props that the default
+     * TextInput would use (placeholder, value, onChangeText, modes, and
+     * accessibility labelling).
+     *
+     * Use this when you want to customize the input implementation but still
+     * respect the higher-level FilterBar API.
+     */
+    renderInput?: (args: RenderInputArgs) => React.ReactNode;
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+} & React.ComponentProps<typeof View>;
+/**
+ * FilterBar component that mirrors the Figma "filterBar" component.
+ *
+ * This component supports:
+ *  - **TextInput** integration with search functionality
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.placeholder='Search'] - Placeholder text for the search input
+ * @param {string} [props.value=''] - Current value of the search input
+ * @param {Function} [props.onChangeText] - Callback function called when text changes
+ * @param {React.ReactNode} [props.children] - Optional custom content to replace the default TextInput. When provided (and `renderInput` is not set), this is treated as a full override and FilterBar will not wire up value or onChangeText.
+ * @param {Function} [props.renderInput] - Optional render prop that receives the input props (placeholder, value, onChangeText, modes, accessibilityLabel/accessibilityHint) and returns a custom input. This takes precedence over `children`.
+ * @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 filter bar
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+declare function FilterBar({ placeholder, value, onChangeText, children, renderInput, modes, style, accessibilityLabel, accessibilityHint, ...rest }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
+export default FilterBar;
+//# sourceMappingURL=FilterBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../../../src/components/FilterBar/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAgDnE,KAAK,eAAe,GAAG;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3B,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,SAAS,CAAC,EACjB,WAAsB,EACtB,KAAU,EACV,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAU,EACV,KAAK,EACL,kBAAkB,EAClB,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,cAAc,2CAsFhB;AAED,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,51 @@
+import { type AccessibilityState, type StyleProp, type ViewStyle } from 'react-native';
+import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
+type IconButtonProps = SafePressableProps & {
+    iconName?: string;
+    modes?: Record<string, any>;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityState?: AccessibilityState;
+    /**
+     * Web-specific accessibility props (only used on web platform)
+     */
+    webAccessibilityProps?: WebAccessibilityProps;
+};
+/**
+ * IconButton component that displays an icon within a pressable button container.
+ *
+ * This component displays an icon within a styled button container that can be pressed.
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
+ * @param {Function} [props.onPress] - Callback function called when the button is pressed
+ * @param {boolean} [props.disabled=false] - Whether the button is disabled
+ * @param {Object} [props.style] - Additional styles for the container
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ *
+ * @example
+ * ```jsx
+ * // Default icon button
+ * <IconButton modes={{}} />
+ *
+ * // Custom icon with size mode
+ * <IconButton iconName="ic_rupee" modes={{"Button / Size": "M"}} />
+ *
+ * // With appearance mode
+ * <IconButton modes={{"Appearance": "high"}} onPress={() => console.log('pressed')} />
+ *
+ * // With accessibility label
+ * <IconButton iconName="ic_search" accessibilityLabel="Search" accessibilityHint="Opens the search screen" />
+ * ```
+ */
+declare function IconButton({ iconName, modes, onPress, disabled, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export default IconButton;
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AAGrB,OAAO,EAA0B,KAAK,kBAAkB,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAE5H,KAAK,eAAe,GAAG,kBAAkB,GAAG;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,KAAU,EACV,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,2CA0GjB;AAED,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View } from 'react-native';
+type IconCapsuleProps = {
+    iconName?: string;
+    modes?: Record<string, any>;
+    accessibilityLabel?: string;
+    accessibilityRole?: string;
+} & React.ComponentProps<typeof View>;
+/**
+ * IconCapsule component that displays an icon within a circular or rounded container.
+ *
+ * This component displays an icon (default: ic_card) within a styled capsule container.
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
+ * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
+ *
+ * @example
+ * ```jsx
+ * // Default icon (ic_card)
+ * <IconCapsule modes={{}} />
+ *
+ * // Custom icon
+ * <IconCapsule iconName="ic_rupee" modes={{}} />
+ *
+ * // With appearance mode
+ * <IconCapsule modes={{"Appearance": "Secondary"}} />
+ *
+ * // With accessibility label
+ * <IconCapsule iconName="ic_card" accessibilityLabel="Credit card icon" />
+ * ```
+ */
+declare function IconCapsule({ iconName, modes, accessibilityLabel, accessibilityRole, ...rest }: IconCapsuleProps): import("react/jsx-runtime").JSX.Element;
+export default IconCapsule;
+//# sourceMappingURL=IconCapsule.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconCapsule.d.ts","sourceRoot":"","sources":["../../../../src/components/IconCapsule/IconCapsule.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAkC,MAAM,cAAc,CAAA;AAInE,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,WAAW,CAAC,EACnB,QAAoB,EACpB,KAAU,EACV,kBAAkB,EAClB,iBAA2B,EAC3B,GAAG,IAAI,EACR,EAAE,gBAAgB,2CA6ClB;AAED,eAAe,WAAW,CAAA"}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+type LazyListProps = {
+    listGroupsSlot?: React.ReactNode;
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+} & React.ComponentProps<typeof View>;
+/**
+ * LazyList component that mirrors the Figma "LazyList" component.
+ *
+ * This component supports:
+ *  - **listGroupsSlot** for custom content (typically ListGroup components)
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "listGroups" → `listGroupsSlot`
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} [props.listGroupsSlot] - Optional custom slot for list groups (Figma Slot "listGroups")
+ * @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 list
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+declare function LazyList({ listGroupsSlot, modes, style, accessibilityLabel, accessibilityHint, ...rest }: LazyListProps): import("react/jsx-runtime").JSX.Element;
+export default LazyList;
+//# sourceMappingURL=LazyList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LazyList.d.ts","sourceRoot":"","sources":["../../../../src/components/LazyList/LazyList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AA4CnE,KAAK,aAAa,GAAG;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,EAChB,cAAc,EACd,KAAU,EACV,KAAK,EACL,kBAA2B,EAC3B,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,aAAa,2CAiCf;AAED,eAAe,QAAQ,CAAA"}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+type ListGroupProps = {
+    label?: string;
+    listGroupSlot?: React.ReactNode;
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+} & React.ComponentProps<typeof View>;
+/**
+ * ListGroup component that mirrors the Figma "List Group" component.
+ *
+ * This component supports:
+ *  - **label** text at the top
+ *  - **listGroupSlot** for custom content (typically ListItem components)
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "List group" → `listGroupSlot`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.label=''] - Label text displayed at the top of the list group
+ * @param {React.ReactNode} [props.listGroupSlot] - Optional custom slot for list items (Figma Slot "List group")
+ * @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 list group. If not provided, uses label
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+declare function ListGroup({ label, listGroupSlot, modes, style, accessibilityLabel, accessibilityHint, ...rest }: ListGroupProps): import("react/jsx-runtime").JSX.Element;
+export default ListGroup;
+//# sourceMappingURL=ListGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/ListGroup/ListGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AA+CzE,KAAK,cAAc,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAU,EACV,aAAa,EACb,KAAU,EACV,KAAK,EACL,kBAAkB,EAClB,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,cAAc,2CAgFhB;AAED,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle, type AccessibilityState } from 'react-native';
+import { type WebAccessibilityProps } from '../../utils/web-platform-utils';
+type ListItemProps = {
+    layout?: 'Vertical' | 'Horizontal';
+    title?: string;
+    supportText?: string;
+    showSupportText?: boolean;
+    leading?: React.ReactNode;
+    supportSlot?: React.ReactNode;
+    endSlot?: React.ReactNode;
+    showTrailing?: boolean;
+    modes?: Record<string, any>;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityState?: AccessibilityState;
+    /**
+     * Web-specific accessibility props (only used on web platform)
+     */
+    webAccessibilityProps?: WebAccessibilityProps;
+} & React.ComponentProps<typeof View>;
+/**
+ * ListItem component that mirrors the Figma "List Item" component.
+ *
+ * This component supports:
+ *  - **layout**: "Vertical" or "Horizontal"
+ *  - **static** vs **navigation** behaviour (based on `onPress`)
+ *  - **slots** for leading element, support text, and trailing 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 "support text" → `supportSlot`
+ *  - Slot "end" → `endSlot`
+ *
+ * @component
+ * @param {Object} props
+ * @param {'Vertical'|'Horizontal'} [props.layout='Vertical'] - Layout variant, controlling structure and children.
+ * @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} [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 {boolean} [props.showTrailing=true] - When `true`, renders the default trailing Button in Horizontal layout if `endSlot` is not provided.
+ * @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).
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.contentStyle] - Optional inner content wrapper style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses title and supportText
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ */
+declare function ListItem({ layout, title, supportText, showSupportText, leading, supportSlot, endSlot, showTrailing, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export default ListItem;
+//# sourceMappingURL=ListItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,IAAI,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAkB,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAI7H,OAAO,EAA0B,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AA8CnG,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,QAAQ,CAAC,EAChB,MAAmB,EACnB,KAAe,EACf,WAA4B,EAC5B,eAAsB,EACtB,OAAO,EACP,WAAW,EACX,OAAO,EACP,YAAmB,EACnB,KAAU,EACV,OAAO,EACP,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,2CA8Qf;AAED,eAAe,QAAQ,CAAA"}