jfs-components 0.0.73 → 0.0.77

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type LottieIntroBlockProps = {
+    /** Headline text shown below the media area. */
+    title?: string;
+    /** Whether to render the supportive paragraph below the title. */
+    showSupportText?: boolean;
+    /** Body/supportive text shown below the title. */
+    supportText?: string;
+    /** Whether to render the action button at the bottom. */
+    showButton?: boolean;
+    /** Label for the default action button. Ignored when `buttonSlot` is provided. */
+    buttonLabel?: string;
+    /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
+    onButtonPress?: () => void;
+    /**
+     * Custom slot for the media area (Lottie animation, illustration, or image).
+     * Should render at the design size of 117x117. If omitted, a neutral
+     * placeholder of the same size is rendered so the layout stays stable.
+     * `modes` are automatically cascaded into this slot.
+     */
+    media?: React.ReactNode;
+    /**
+     * Optional slot to fully override the action button.
+     * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
+     * `modes` are automatically cascaded into this slot.
+     */
+    buttonSlot?: React.ReactNode;
+    /** Mode configuration for design-token theming. */
+    modes?: Record<string, any>;
+    /** Style overrides applied to the outer container. */
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+/**
+ * LottieIntroBlock displays a centered onboarding/intro block composed of a
+ * media slot (typically a Lottie animation or illustration) above a title,
+ * an optional supportive paragraph, and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LottieIntroBlock
+ *   title="Let's get to know how your financial health is doing"
+ *   supportText="From assets to taxes, stay on top of everything in one simple view."
+ *   buttonLabel="Get started"
+ *   onButtonPress={() => navigate('NextScreen')}
+ *   media={<MyLottiePlayer source={animationSource} />}
+ * />
+ * ```
+ */
+declare function LottieIntroBlock({ title, showSupportText, supportText, showButton, buttonLabel, onButtonPress, media, buttonSlot, modes: propModes, style, testID, }: LottieIntroBlockProps): import("react/jsx-runtime").JSX.Element;
+export default LottieIntroBlock;
+//# sourceMappingURL=LottieIntroBlock.d.ts.map

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * A parsed Lottie animation. The JSON object you get from
+ * `require('./animation.json')` or `fetch().then(r => r.json())`. We keep the
+ * type intentionally loose because both `lottie-react-native` and `lottie-react`
+ * accept slightly different shapes — `LottiePlayer` narrows back to the
+ * platform-specific type internally.
+ */
+export type LottieAnimationSource = Record<string, unknown>;
+export type LottiePlayerProps = {
+    /**
+     * Parsed Lottie animation JSON. Use `require('./animation.json')` in React
+     * Native or `import animation from './animation.json'` on web.
+     *
+     * URI sources (`{ uri: '...' }`) are intentionally not accepted here — web
+     * Lottie players require the animation data to be pre-parsed. Fetch and
+     * parse the JSON yourself before passing it in if you need a remote source.
+     */
+    source: LottieAnimationSource;
+    /**
+     * Override the rendered size. Pass a number for a square box, or
+     * `{ width, height }` for non-square.
+     *
+     * When omitted, size is resolved from the `media/width` and `media/height`
+     * design tokens (default `117 × 117`). The `Media / Output` collection
+     * exposes `L | M | S` modes (117 / 70 / 20) — pass
+     * `modes={{ 'Media / Output': 'M' }}` to render at 70×70, etc.
+     */
+    size?: number | {
+        width: number;
+        height: number;
+    };
+    /** Play the animation on mount. Defaults to `true`. */
+    autoPlay?: boolean;
+    /** Loop the animation. Defaults to `true`. */
+    loop?: boolean;
+    /** Mode configuration for design-token theming. */
+    modes?: Record<string, any>;
+    /** Style overrides applied to the underlying view. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label. Lottie is decorative by default. */
+    accessibilityLabel?: string;
+    testID?: string;
+};
+/**
+ * Renders a Lottie animation using the consumer's installed
+ * `lottie-react-native` (native) or `lottie-react` (web) — both are declared
+ * as **optional peer dependencies** of `jfs-components`, so installing the
+ * library does not pull them in. Add the relevant package to your app only
+ * if you actually use `LottiePlayer`:
+ *
+ * ```sh
+ * # React Native (iOS / Android)
+ * npm install lottie-react-native
+ * cd ios && pod install
+ *
+ * # Web (or react-native-web)
+ * npm install lottie-react
+ * ```
+ *
+ * The web build (`LottiePlayer.web.tsx`) is picked automatically by Metro /
+ * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
+ *
+ * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
+ * `media/width` and `media/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Media / Output` mode
+ * automatically. This is the same sizing contract `PageHero` and
+ * `LottieIntroBlock` use for their `media` slots.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import animation from './assets/loader.json';
+ *
+ * <LottiePlayer source={animation} />                    // 117 × 117 (default)
+ * <LottiePlayer source={animation} size={70} />          // 70 × 70
+ * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <PageHero media={<LottiePlayer source={animation} />} />
+ * ```
+ */
+declare function LottiePlayer({ source, size, autoPlay, loop, modes: propModes, style, accessibilityLabel, testID, }: LottiePlayerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof LottiePlayer>;
+export default _default;
+//# sourceMappingURL=LottiePlayer.d.ts.map

package/lib/typescript/src/components/LottiePlayer/LottiePlayer.web.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type LottieAnimationSource = Record<string, unknown>;
+export type LottiePlayerProps = {
+    source: LottieAnimationSource;
+    size?: number | {
+        width: number;
+        height: number;
+    };
+    autoPlay?: boolean;
+    loop?: boolean;
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+};
+/**
+ * Web build of `LottiePlayer` — picked automatically by webpack /
+ * Metro-for-web via the `.web.tsx` platform extension. Uses `lottie-react`
+ * (which wraps `lottie-web`) and renders a plain DOM container.
+ *
+ * Public API mirrors `LottiePlayer.tsx` (native). See that file for the
+ * documented prop reference and usage patterns.
+ */
+declare function LottiePlayer({ source, size, autoPlay, loop, modes: propModes, style, accessibilityLabel, testID, }: LottiePlayerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof LottiePlayer>;
+export default _default;
+//# sourceMappingURL=LottiePlayer.web.d.ts.map

package/lib/typescript/src/components/LottiePlayer/loadNativeLottieView.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+/** Props we forward to the underlying native Lottie view. */
+export type NativeLottieViewProps = {
+    source: Record<string, unknown>;
+    autoPlay?: boolean;
+    loop?: boolean;
+    style?: ViewStyle;
+};
+export declare function getNativeLottieView(): React.ComponentType<NativeLottieViewProps>;
+//# sourceMappingURL=loadNativeLottieView.d.ts.map

package/lib/typescript/src/components/LottiePlayer/loadWebLottieView.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CSSProperties } from 'react';
+/** Props we forward to the underlying web Lottie view. */
+export type WebLottieViewProps = {
+    animationData: Record<string, unknown>;
+    autoplay?: boolean;
+    loop?: boolean;
+    style?: CSSProperties;
+};
+export declare function getWebLottieView(): React.ComponentType<WebLottieViewProps>;
+//# sourceMappingURL=loadWebLottieView.d.ts.map

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type PageHeroProps = {
+    /** Small eyebrow text shown above the headline. */
+    eyebrow?: string;
+    /** Main headline text. Centered and bold. */
+    headline?: string;
+    /** Optional supporting text shown below the headline. */
+    supportingText?: string;
+    /** Whether to render the supporting text. */
+    showSupportingText?: boolean;
+    /** Label for the default action button. Ignored when `buttonSlot` is provided. */
+    buttonLabel?: string;
+    /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
+    onButtonPress?: () => void;
+    /** Whether to render the default action button. Ignored when `buttonSlot` is provided. */
+    showButton?: boolean;
+    /**
+     * Optional slot to fully override the action button.
+     * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
+     * `modes` are automatically cascaded into this slot.
+     */
+    buttonSlot?: React.ReactNode;
+    /**
+     * Optional media element shown above the text block (eyebrow + headline).
+     *
+     * Intentionally typed as `React.ReactNode` so the consumer can bring any
+     * renderer they like — `<Image />`, `<IconCapsule />`, a Lottie player
+     * (`lottie-react-native` / `@lottiefiles/dotlottie-react`), an `<SvgXml />`
+     * from `react-native-svg`, a `<Video />` from `react-native-video`, a
+     * gradient view, or a custom illustration. The library deliberately does
+     * NOT wrap Lottie / video runtimes (they require native modules + pod
+     * autolinking on every consumer's app), so PageHero just allocates a
+     * token-sized container and lets the slot render whatever it wants.
+     *
+     * The slot is rendered inside a `width × height` box driven by
+     * `media/width` and `media/height` tokens (default 117×117). `modes` are
+     * automatically cascaded into the slot via `cloneChildrenWithModes`.
+     */
+    media?: React.ReactNode;
+    /** Mode configuration for design-token theming. */
+    modes?: Record<string, any>;
+    /** Style overrides applied to the outer container. */
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+/**
+ * PageHero displays a centered hero block typically used at the top of a page
+ * or feature screen. It contains an optional media slot (illustration / image
+ * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
+ * headline, an optional supporting line (e.g. price / timeline), and an
+ * optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PageHero
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Resume earning cashback, extra points, and 1% gold"
+ *   supportingText="₹999/year · ₹0 until 2027"
+ *   buttonLabel="Renew for free"
+ *   onButtonPress={() => navigate('Upgrade')}
+ *   media={
+ *     <Image
+ *       imageSource={require('./assets/upgrade.png')}
+ *       width={117}
+ *       height={117}
+ *     />
+ *   }
+ * />
+ * ```
+ */
+declare function PageHero({ eyebrow, headline, supportingText, showSupportingText, buttonLabel, onButtonPress, showButton, buttonSlot, media, modes: propModes, style, testID, }: PageHeroProps): import("react/jsx-runtime").JSX.Element;
+export default PageHero;
+//# sourceMappingURL=PageHero.d.ts.map

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { type ImageStyle, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type UnifiedSource } from '../../utils/MediaSource';
+export type PoweredByLabelProps = {
+    /**
+     * Label copy. Defaults to "Powered by RBI-regulated account aggregator"
+     * to match the Figma reference.
+     */
+    label?: string;
+    /**
+     * Brand logo source. Accepts any {@link UnifiedSource} — remote URI, SVG
+     * XML string, `require()` asset, SVG React component, or React element.
+     * Defaults to the bundled FINVU logo so the component renders correctly
+     * without any caller-provided image.
+     *
+     * Ignored when `imageSlot` is provided.
+     */
+    imageSource?: UnifiedSource;
+    /**
+     * Rendered width of the logo in px. Defaults to `33` to match Figma.
+     */
+    imageWidth?: number;
+    /**
+     * Rendered height of the logo in px. Defaults to `12` to match Figma.
+     */
+    imageHeight?: number;
+    /**
+     * Replace the default `Image` entirely (e.g. with a vector logo,
+     * `BrandChip`, or custom layout). Receives `modes` recursively.
+     * Overrides `imageSource`.
+     */
+    imageSlot?: React.ReactNode;
+    /**
+     * Design token modes for theming (e.g. `{ 'Color Mode': 'Dark' }`).
+     */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Label text style override. */
+    textStyle?: StyleProp<TextStyle>;
+    /** Logo image style override (size/resize behaviour, etc.). */
+    imageStyle?: StyleProp<ImageStyle>;
+    /**
+     * Accessibility label. Defaults to the visible `label` so the brand image
+     * (which is decorative) does not need to be announced separately.
+     */
+    accessibilityLabel?: string;
+};
+/**
+ * `PoweredByLabel` renders the small "Powered by RBI-regulated account
+ * aggregator" badge with a trailing brand logo, used to attribute the
+ * underlying account-aggregator partner in flows such as bank-account
+ * linking and consent screens.
+ *
+ * The component is composed of:
+ *
+ * 1. A token-styled pill container (`poweredByLabel/background`,
+ *    `poweredByLabel/padding/*`).
+ * 2. The disclosure copy rendered through the `poweredByLabel/*` typography
+ *    tokens.
+ * 3. A configurable brand logo slot. Defaults to the bundled FINVU mark, but
+ *    callers can pass any image via `imageSource` or fully replace the slot
+ *    via `imageSlot`.
+ *
+ * @component
+ * @param {PoweredByLabelProps} props
+ */
+declare function PoweredByLabel({ label, imageSource, imageWidth, imageHeight, imageSlot, modes: propModes, style, textStyle, imageStyle, accessibilityLabel, }: PoweredByLabelProps): import("react/jsx-runtime").JSX.Element;
+export default PoweredByLabel;
+//# sourceMappingURL=PoweredByLabel.d.ts.map

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

@@ -1,7 +1,17 @@
+import React from 'react';
 import { type TextStyle, type StyleProp } from 'react-native';
 export type TextProps = {
-    /** The text content to display. */
+    /**
+     * The text content to display. You may also pass content as JSX children
+     * (e.g. `<Text>Hello</Text>`) — when both are provided, `children` wins.
+     */
     text?: string;
+    /**
+     * Child nodes (string, number, or nested <Text>/<RNText> elements). This
+     * mirrors the standard React Native `<Text>` API so the component is a
+     * near-drop-in replacement.
+     */
+    children?: React.ReactNode;
     /** Horizontal alignment of the text. */
     textAlign?: 'Left' | 'Center';
     /** Modes configuration for design token resolution. */
@@ -10,7 +20,26 @@ export type TextProps = {
     style?: StyleProp<TextStyle>;
     /** Number of lines to limit the text to. */
     numberOfLines?: number;
+    /**
+     * Explicit per-instance loading override. When `true`, this `Text` renders
+     * a skeleton placeholder regardless of any surrounding `<SkeletonGroup>`.
+     * When `false`, the surrounding group is ignored for this instance. When
+     * omitted, the surrounding group's `loading` flag wins.
+     */
+    loading?: boolean;
+    /**
+     * Optional width used while the skeleton is showing. Numbers are dp;
+     * `'100%'` (etc.) is a valid RN dimension. Defaults to a character-count
+     * heuristic based on the resolved font size and the supplied content.
+     */
+    skeletonWidth?: number | `${number}%`;
+    /**
+     * Optional explicit line count for the skeleton placeholder. Defaults to
+     * `numberOfLines ?? 1`. Useful when `numberOfLines` is intentionally
+     * unbounded but you want a sensible multi-line placeholder.
+     */
+    skeletonLines?: number;
 };
-declare function Text({ text, textAlign, modes, style, numberOfLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ text, children, textAlign, modes, style, numberOfLines, loading, skeletonWidth, skeletonLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
 export default Text;
 //# sourceMappingURL=Text.d.ts.map

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Pressable } from 'react-native';
+import { Pressable, ViewStyle } from 'react-native';
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export type TooltipProps = {
     children: ReactNode;
@@ -21,6 +21,17 @@ export declare function TooltipTrigger({ children, asChild, ...props }: TooltipT
 export type TooltipContentProps = {
     children: ReactNode;
     sideOffset?: number;
+    /**
+     * Vertical spacing between slot children, in pixels.
+     * The content area acts as a vertical slot: any children passed in
+     * (text, icons, custom views, etc.) are stacked top-to-bottom with this gap.
+     */
+    gap?: number;
+    /**
+     * Cross-axis alignment of slot children.
+     * Defaults to `flex-start` so multi-line/multi-element content lines up on the left.
+     */
+    alignItems?: ViewStyle['alignItems'];
 };
-export declare function TooltipContent({ children, sideOffset }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function TooltipContent({ children, sideOffset, gap, alignItems, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1,3 +1,4 @@
+export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard';
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
@@ -21,6 +22,8 @@ export { default as CardInsight, type CardInsightProps } from './CardInsight/Car
 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 Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
+export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA';
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
@@ -43,6 +46,8 @@ export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
+export { default as LottieIntroBlock, type LottieIntroBlockProps } from './LottieIntroBlock/LottieIntroBlock';
+export { default as LottiePlayer, type LottiePlayerProps, type LottieAnimationSource } from './LottiePlayer/LottiePlayer';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
@@ -61,7 +66,7 @@ export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
 export { default as StatusHero, type StatusHeroProps } from './StatusHero/StatusHero';
 export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
-export { Tooltip } from './Tooltip/Tooltip';
+export { Tooltip, TooltipTrigger, TooltipContent, type TooltipProps, type TooltipTriggerProps, type TooltipContentProps, type Placement as TooltipPlacement, } from './Tooltip/Tooltip';
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as TransactionBubble, type TransactionBubbleProps } from './TransactionBubble/TransactionBubble';
@@ -98,8 +103,10 @@ export { default as Toast, type ToastProps } from './Toast/Toast';
 export { default as ToastProvider, type ToastProviderProps } from './Toast/ToastProvider';
 export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
 export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
+export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
+export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';
 export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';

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

@@ -18,6 +18,12 @@ type IconProps = AccessibilityProps & {
     size?: number;
     color?: string;
     style?: StyleProp<ViewStyle>;
+    /**
+     * Explicit per-instance loading override. When `true`, renders a square
+     * skeleton at the icon's size; when `false`, the surrounding
+     * `<SkeletonGroup>` is ignored. Defaults to inheriting from the group.
+     */
+    loading?: boolean;
 };
 /**
  * Generic Icon component.
@@ -43,6 +49,6 @@ type IconProps = AccessibilityProps & {
  * <Icon source={BrandLogo} size={24} color="red" />
  * ```
  */
-declare function Icon({ name, source, size, color, style, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Icon({ name, source, size, color, style, loading, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
 export default Icon;
 //# sourceMappingURL=Icon.d.ts.map

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

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-05-15T16:18:56.427Z
+ * Generated: 2026-05-25T10:18:38.037Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

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

@@ -3,4 +3,5 @@ export * as Icons from './icons';
 export * from './design-tokens';
 export * from './Containers';
 export * from './utils';
+export * from './skeleton';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/skeleton/Skeleton.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { type DimensionValue, type StyleProp, type ViewStyle } from 'react-native';
+import { type SkeletonKind } from './shimmer-tokens';
+export interface SkeletonProps {
+    /**
+     * Visual category — controls only the corner-radius token. Sizes are still
+     * supplied via `width`/`height`. Defaults to `'other'`.
+     */
+    kind?: SkeletonKind;
+    /** Width of the rectangular placeholder. Numbers are dp, strings are RN dimensions. */
+    width?: DimensionValue;
+    /** Height of the rectangular placeholder. */
+    height?: DimensionValue;
+    /**
+     * Optional style overrides merged onto the base layer (e.g. `marginTop`,
+     * `alignSelf`). Avoid `backgroundColor` and `borderRadius` here — use the
+     * design tokens instead so the system stays consistent.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Modes for token resolution (forwarded to `getVariableByName`). Most
+     * consumers can omit this — defaults work for every standard mode.
+     */
+    modes?: Record<string, any>;
+}
+/**
+ * Atomic skeleton placeholder. Renders a base rectangle (background colour +
+ * radius per kind) plus an animated overlay that produces the shimmer.
+ *
+ * Two visual modes share the same engine:
+ *
+ *   - Normal mode (gradient: true): a soft 135° band translates diagonally
+ *     across the box end-to-end. Its alpha inside the moving band varies
+ *     33% → 100% → 33% via gradient stops. The sawtooth clock travels from
+ *     fully off-screen (−overshoot) to fully off-screen (+overshoot) so the
+ *     transparent gradient tails clear the box before the loop resets.
+ *
+ *   - Reduced-motion mode (gradient: false): a solid white overlay covers the
+ *     box and pulses opacity 33% → 100% → 33% in place, with no translation,
+ *     ease-in-out timing and no stagger.
+ *
+ * Critical for cross-platform consistency:
+ *
+ *   - The SVG gradient uses `gradientUnits="userSpaceOnUse"` with absolute
+ *     pixel coordinates that have Δx === Δy. This guarantees the visual angle
+ *     is exactly 45° in screen pixels (= 135° CSS) on ANY aspect ratio. With
+ *     the default `objectBoundingBox` units, the gradient line is normalised
+ *     to the box and tilts off-angle on non-square boxes.
+ *
+ *   - The whole animated overlay sits inside a clipping parent (`overflow:
+ *     hidden` + `borderRadius`). Translating an `Animated.View` is GPU-cheap
+ *     on both iOS/Android (Reanimated UI thread) and on web (CSS transforms).
+ *
+ *   - The SVG `id` for the gradient is per-instance (`useId`) so multiple
+ *     skeletons on a web page don't collide on `url(#…)` resolution.
+ */
+declare function SkeletonImpl({ kind, width, height, style, modes, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare const Skeleton: React.MemoExoticComponent<typeof SkeletonImpl>;
+export default Skeleton;
+//# sourceMappingURL=Skeleton.d.ts.map

package/lib/typescript/src/skeleton/SkeletonGroup.d.ts

@@ -0,0 +1,78 @@
+import { type ReactNode } from 'react';
+import { type SharedValue } from 'react-native-reanimated';
+/**
+ * Shape of the value carried by the SkeletonContext.
+ *
+ * The provider owns ONE Reanimated shared value per group; every child
+ * `<Skeleton>` reads it on the UI thread and computes its own opacity from
+ * `(clock + perItemPhaseOffset)`. That keeps per-skeleton work bounded to a
+ * single `useAnimatedStyle` and avoids per-block JS timers.
+ */
+export interface SkeletonContextValue {
+    /** Whether the surrounding group is currently in loading state. */
+    active: boolean;
+    /**
+     * Whether reduced-motion treatment should be applied. May be auto-detected
+     * from the OS or explicitly overridden via the `reducedMotion` prop on
+     * `<SkeletonGroup>`.
+     */
+    reducedMotion: boolean;
+    /**
+     * Shared phase value driven on the UI thread. Sawtooth: ramps linearly
+     * (or eased) from 0 -> 1 over one `SHIMMER.*.durationMs` period, then
+     * jumps back to 0 and repeats. Sawtooth is required so that the moving
+     * shimmer band sweeps from end to end at a constant heading and resets
+     * cleanly; a ping-pong clock would produce a discontinuity in
+     * `(clock + phaseOffset) % 1` at the apex, which translates to a visible
+     * jump in the band's position when stagger offsets are non-zero.
+     */
+    clock: SharedValue<number>;
+    /**
+     * Atomically registers a child skeleton and returns its registration index.
+     * The order is stable for the life of the parent group; the counter is held
+     * in a ref so React's render lifecycle doesn't reshuffle it.
+     */
+    nextIndex(): number;
+}
+export interface SkeletonGroupProps {
+    /** When true, descendant skeleton-aware primitives render placeholders. */
+    loading: boolean;
+    /**
+     * Override the auto-detected reduced-motion preference. Pass `undefined` to
+     * use the system value (default). Pass `true`/`false` to force.
+     */
+    reducedMotion?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Provider that flips an entire subtree into "loading" mode and supplies the
+ * shared shimmer clock + stagger index source to every descendant skeleton.
+ *
+ * Usage:
+ *   ```tsx
+ *   <SkeletonGroup loading={!data}>
+ *     <Card>...JFS primitives auto-skeletonize...</Card>
+ *   </SkeletonGroup>
+ *   ```
+ *
+ * Nesting is supported — an inner `<SkeletonGroup>` fully overrides the
+ * outer one for its subtree (its own clock, its own index counter).
+ */
+export declare function SkeletonGroup({ loading, reducedMotion: reducedMotionOverride, children, }: SkeletonGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Internal hook used by skeleton-aware primitives (and by `<Skeleton>`
+ * itself) to read the surrounding context.
+ *
+ * Always returns a non-null value: when called outside any provider, the
+ * returned object has `active: false` so the consumer falls through to its
+ * normal render path. The fallback clock is a no-op shared value so any
+ * direct `<Skeleton>` usage outside a group still has something safe to read.
+ */
+export declare function useSkeleton(): SkeletonContextValue;
+/**
+ * Convenience wrapper around `useSkeleton().nextIndex()` that pins the
+ * returned value across re-renders. Each `<Skeleton>` calls this once on
+ * mount; subsequent renders re-use the same index from the closure.
+ */
+export declare function useStaggerIndex(): number;
+//# sourceMappingURL=SkeletonGroup.d.ts.map

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

@@ -0,0 +1,5 @@
+export { default as Skeleton, type SkeletonProps } from './Skeleton';
+export { SkeletonGroup, useSkeleton, useStaggerIndex, type SkeletonGroupProps, type SkeletonContextValue, } from './SkeletonGroup';
+export { useReducedMotion } from './useReducedMotion';
+export { SHIMMER, SKELETON_TOKEN, SKELETON_FALLBACK, type SkeletonKind } from './shimmer-tokens';
+//# sourceMappingURL=index.d.ts.map