jfs-components 0.0.63 → 0.0.65

package/lib/module/utils/MediaSource.js

@@ -0,0 +1,176 @@
+"use strict";
+
+import React from 'react';
+import { Image } from 'react-native';
+import { SvgUri, SvgXml } from 'react-native-svg';
+
+/**
+ * A unified, "do-the-right-thing" image source accepted by `MediaSource` and
+ * by the `source` prop on `Icon`, `IconCapsule` and `UpiHandle`.
+ *
+ * Accepts any of:
+ *  - `string`   — a URI (raster or `.svg`) **or** an inline SVG XML document
+ *                 (`'<svg …>…</svg>'`).
+ *  - `number`   — a Metro asset id from `require('./foo.png')`.
+ *  - `{ uri, … }` — the standard RN `ImageURISource` object (works for both
+ *                   raster and `.svg` URIs).
+ *  - `React.ComponentType` — an SVG React component (e.g. produced by
+ *                            `react-native-svg-transformer`, by `@svgr/*`,
+ *                            or hand-written). It is rendered with
+ *                            `{ width, height, color, fill }` so it can be
+ *                            tinted just like a built-in icon.
+ *  - `React.ReactElement`  — an already-rendered node, passed through verbatim.
+ *
+ * The helper sniffs the input shape (no extension hint required from the
+ * caller) and picks the correct renderer for the platform.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SVG_XML_RE = /<svg[\s>]/i;
+const SVG_URI_RE = /\.svg(\?|#|$)/i;
+function isSvgXml(s) {
+  return /^\s*</.test(s) && SVG_XML_RE.test(s);
+}
+function isSvgUri(s) {
+  return SVG_URI_RE.test(s);
+}
+function isUriObject(v) {
+  return typeof v === 'object' && v !== null && 'uri' in v && typeof v.uri === 'string';
+}
+
+/**
+ * Smart renderer that picks the right primitive for the source shape. See
+ * {@link UnifiedSource}.
+ *
+ * Designed to be used internally by `Icon`, `IconCapsule`, and `UpiHandle`,
+ * but also exported for ad-hoc consumer use.
+ */
+function MediaSource(props) {
+  const {
+    source,
+    size,
+    width,
+    height,
+    tintColor,
+    style,
+    resizeMode = 'cover',
+    accessibilityElementsHidden,
+    importantForAccessibility
+  } = props;
+  const w = width ?? size;
+  const h = height ?? size;
+
+  // Pre-rendered element — pass through.
+  if (/*#__PURE__*/React.isValidElement(source)) {
+    return source;
+  }
+
+  // SVG / icon component.
+  if (typeof source === 'function') {
+    const Comp = source;
+    return /*#__PURE__*/_jsx(Comp, {
+      ...(w !== undefined ? {
+        width: w
+      } : {}),
+      ...(h !== undefined ? {
+        height: h
+      } : {}),
+      ...(tintColor !== undefined ? {
+        color: tintColor,
+        fill: tintColor
+      } : {})
+    });
+  }
+  const sizeStyle = w !== undefined || h !== undefined ? {
+    width: w,
+    height: h
+  } : null;
+  const tintStyle = tintColor ? {
+    tintColor
+  } : null;
+  const composedStyle = [sizeStyle, tintStyle, style];
+  if (typeof source === 'string') {
+    if (isSvgXml(source)) {
+      return /*#__PURE__*/_jsx(SvgXml, {
+        xml: source,
+        ...(w !== undefined ? {
+          width: w
+        } : {}),
+        ...(h !== undefined ? {
+          height: h
+        } : {}),
+        ...(tintColor !== undefined ? {
+          color: tintColor
+        } : {})
+      });
+    }
+    if (isSvgUri(source)) {
+      return /*#__PURE__*/_jsx(SvgUri, {
+        uri: source,
+        ...(w !== undefined ? {
+          width: w
+        } : {}),
+        ...(h !== undefined ? {
+          height: h
+        } : {}),
+        ...(tintColor !== undefined ? {
+          color: tintColor
+        } : {})
+      });
+    }
+    return /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: source
+      },
+      style: composedStyle,
+      resizeMode: resizeMode,
+      ...(accessibilityElementsHidden !== undefined ? {
+        accessibilityElementsHidden
+      } : {}),
+      ...(importantForAccessibility !== undefined ? {
+        importantForAccessibility
+      } : {})
+    });
+  }
+  if (isUriObject(source)) {
+    if (isSvgUri(source.uri)) {
+      return /*#__PURE__*/_jsx(SvgUri, {
+        uri: source.uri,
+        ...(w !== undefined ? {
+          width: w
+        } : {}),
+        ...(h !== undefined ? {
+          height: h
+        } : {}),
+        ...(tintColor !== undefined ? {
+          color: tintColor
+        } : {})
+      });
+    }
+    return /*#__PURE__*/_jsx(Image, {
+      source: source,
+      style: composedStyle,
+      resizeMode: resizeMode,
+      ...(accessibilityElementsHidden !== undefined ? {
+        accessibilityElementsHidden
+      } : {}),
+      ...(importantForAccessibility !== undefined ? {
+        importantForAccessibility
+      } : {})
+    });
+  }
+  if (typeof source === 'number') {
+    return /*#__PURE__*/_jsx(Image, {
+      source: source,
+      style: composedStyle,
+      resizeMode: resizeMode,
+      ...(accessibilityElementsHidden !== undefined ? {
+        accessibilityElementsHidden
+      } : {}),
+      ...(importantForAccessibility !== undefined ? {
+        importantForAccessibility
+      } : {})
+    });
+  }
+  return null;
+}
+export default /*#__PURE__*/React.memo(MediaSource);

package/lib/module/utils/index.js

@@ -1,3 +1,4 @@
 "use strict";
 
-export { cloneChildrenWithModes, flattenChildren } from './react-utils';
+export { cloneChildrenWithModes, flattenChildren } from './react-utils';
+export { default as MediaSource } from './MediaSource';

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

@@ -24,11 +24,16 @@ type DrawerProps = {
      * as a tab bar.  Defaults to 80.
      */
     bottomInset?: number;
+    /**
+     * Called whenever the drawer settles into a new state (collapsed or
+     * expanded), so parent components can react programmatically.
+     */
+    onStateChange?: (state: 'collapsed' | 'expanded') => void;
 };
 /**
  * Drawer component with nested scrolling support.
  * Uses react-native-gesture-handler and react-native-reanimated.
  */
-declare function Drawer({ modes, style, title, header, children, collapsedHeight, expandedRatio, initialState, contentStyle, sheetStyle, accessibilityLabel, accessibilityHint, contentContainerStyle, showsVerticalScrollIndicator, bottomInset, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+declare function Drawer({ modes, style, title, header, children, collapsedHeight, expandedRatio, initialState, contentStyle, sheetStyle, accessibilityLabel, accessibilityHint, contentContainerStyle, showsVerticalScrollIndicator, bottomInset, onStateChange, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
 export default Drawer;
 //# sourceMappingURL=Drawer.d.ts.map

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

@@ -1,8 +1,18 @@
 import React from 'react';
 import { type AccessibilityState, type StyleProp, type ViewStyle } from 'react-native';
 import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
+import type { UnifiedSource } from '../../utils/MediaSource';
 type IconButtonProps = SafePressableProps & {
+    /** Built-in icon name from the registry (default state). */
     iconName?: string;
+    /**
+     * Unified fallback source for the default state, used when `iconName` is
+     * missing or not in the registry. Accepts a remote URI, an inline SVG XML
+     * string, a `require()` asset, an SVG React component, or a React element.
+     * The result is tinted with the button's mode-resolved icon color so it
+     * follows design tokens just like a built-in icon. See {@link UnifiedSource}.
+     */
+    source?: UnifiedSource;
     modes?: Record<string, any>;
     onPress?: () => void;
     disabled?: boolean;
@@ -18,10 +28,24 @@ type IconButtonProps = SafePressableProps & {
      * Icon to display when isToggle is true and isActive is true
      */
     activeIcon?: string;
+    /**
+     * Unified fallback source for the active state. Used when `activeIcon` is
+     * missing or not in the registry (and only when `isToggle` is true and
+     * `isActive` is true). Falls back to the default `source` if not provided.
+     * See {@link UnifiedSource}.
+     */
+    activeSource?: UnifiedSource;
     /**
      * Icon to display when isToggle is true and isActive is false
      */
     inactiveIcon?: string;
+    /**
+     * Unified fallback source for the inactive state. Used when `inactiveIcon`
+     * is missing or not in the registry (and only when `isToggle` is true and
+     * `isActive` is false). Falls back to the default `source` if not provided.
+     * See {@link UnifiedSource}.
+     */
+    inactiveSource?: UnifiedSource;
     /**
      * Whether the toggle button is in active state (only used when isToggle is true)
      */
@@ -31,20 +55,7 @@ type IconButtonProps = SafePressableProps & {
      */
     webAccessibilityProps?: WebAccessibilityProps;
 };
-/**
- * IconButton component that displays an icon within a pressable button container.
- *
- * Performance notes:
- *  - Token reads collapsed into a single `useMemo([modes, disabled, isToggle, isActive])`.
- *  - Press visual goes through Pressable's `({ pressed })` style callback so
- *    a scroll-cancelled touch never schedules a React render. iOS gets
- *    `unstable_pressDelay={130}`.
- *  - Hover and focus state are mirrored on web only (gated setters).
- *  - The previous version had a redundant `manualPressStyle` (a duplicate
- *    pressed transform mirrored via React state) — removed.
- *  - Wrapped in `React.memo`.
- */
-declare function IconButton({ iconName, modes, onPress, disabled, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, isToggle, activeIcon, inactiveIcon, isActive, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function IconButton({ iconName, source, modes, onPress, disabled, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, isToggle, activeIcon, activeSource, inactiveIcon, inactiveSource, isActive, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof IconButton>;
 export default _default;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -1,7 +1,17 @@
 import React from 'react';
 import { View } from 'react-native';
+import type { UnifiedSource } from '../../utils/MediaSource';
 type IconCapsuleProps = {
     iconName?: string;
+    /**
+     * Unified fallback source rendered when `iconName` is missing or not in the
+     * registry. Accepts a remote URI, an inline SVG XML string, a `require()`
+     * asset, an SVG React component, or an already-rendered element. The
+     * resulting media is tinted with the capsule's mode-resolved icon color so
+     * it follows design tokens just like a built-in icon. See
+     * {@link UnifiedSource}.
+     */
+    source?: UnifiedSource;
     modes?: Record<string, any>;
     accessibilityLabel?: string;
     accessibilityRole?: string;
@@ -14,6 +24,7 @@ type IconCapsuleProps = {
  * @component
  * @param {Object} props - Component props
  * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {UnifiedSource} [props.source] - Fallback source (remote URI, inline SVG XML, `require()` asset, SVG React component, or React element). Used when `iconName` is missing or unknown. Tinted with the mode-resolved icon color so it follows design tokens just like a built-in icon.
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
@@ -25,7 +36,7 @@ type IconCapsuleProps = {
  *  - Wrapped in `React.memo`; with the shared `EMPTY_MODES` default the
  *    common path benefits from full memoization.
  */
-declare function IconCapsule({ iconName, modes: propModes, accessibilityLabel: _accessibilityLabel, accessibilityRole, style: styleProp, ...rest }: IconCapsuleProps): import("react/jsx-runtime").JSX.Element;
+declare function IconCapsule({ iconName, source, modes: propModes, accessibilityLabel: _accessibilityLabel, accessibilityRole, style: styleProp, ...rest }: IconCapsuleProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof IconCapsule>;
 export default _default;
 //# sourceMappingURL=IconCapsule.d.ts.map

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

@@ -22,6 +22,10 @@ declare function Section({ title, supportText, showSupportText, slot, slotDirect
 declare namespace Section {
     var Bento: typeof SectionBento;
 }
+type BentoToggleRenderState = {
+    expanded: boolean;
+    toggle: () => void;
+};
 type SectionBentoProps = {
     navSlot?: React.ReactNode;
     upiSlot?: React.ReactNode;
@@ -33,7 +37,44 @@ type SectionBentoProps = {
      * Web-specific accessibility props (only used on web platform)
      */
     webAccessibilityProps?: WebAccessibilityProps;
+    /**
+     * Total cell count visible when collapsed (real items + the toggle cell).
+     * Defaults to {@link SLOT_GRID_MAX_COLUMNS} (4) so the collapsed state fills
+     * exactly one row. When `navSlot.length <= collapsedCount`, expansion is
+     * disabled (no toggle injected, no animation wrappers — identical to the
+     * legacy behavior for back-compat).
+     */
+    collapsedCount?: number;
+    /**
+     * Uncontrolled initial expanded state. Ignored when `expanded` is provided.
+     * Defaults to `false`.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controlled expanded state. When provided, `onExpandedChange` should also
+     * be provided so the component can request changes.
+     */
+    expanded?: boolean;
+    /**
+     * Called when the user taps the toggle. Required in controlled mode; ignored
+     * in uncontrolled mode unless you want to observe the change.
+     */
+    onExpandedChange?: (next: boolean) => void;
+    /** Label shown on the toggle cell when collapsed. Default `'More'`. */
+    toggleMoreLabel?: string;
+    /** Label shown on the toggle cell when expanded. Default `'Less'`. */
+    toggleLessLabel?: string;
+    /** Icon name shown on the toggle when collapsed. Default `'ic_chevron_down'`. */
+    toggleMoreIcon?: string;
+    /** Icon name shown on the toggle when expanded. Default `'ic_chevron_up'`. */
+    toggleLessIcon?: string;
+    /**
+     * Escape hatch: render a custom toggle cell instead of the default ListItem.
+     * The provided node is rendered in the toggle's grid slot. Wire `toggle()` to
+     * any tap interaction inside it. Height + per-cell animations still apply.
+     */
+    renderToggle?: (state: BentoToggleRenderState) => React.ReactNode;
 } & React.ComponentProps<typeof View>;
-declare function SectionBento({ navSlot, upiSlot, modes, style, accessibilityLabel: _accessibilityLabel, accessibilityHint, ...rest }: SectionBentoProps): import("react/jsx-runtime").JSX.Element;
+declare function SectionBento({ navSlot, upiSlot, modes, style, accessibilityLabel: _accessibilityLabel, accessibilityHint, collapsedCount, defaultExpanded, expanded: controlledExpanded, onExpandedChange, toggleMoreLabel, toggleLessLabel, toggleMoreIcon, toggleLessIcon, renderToggle, ...rest }: SectionBentoProps): import("react/jsx-runtime").JSX.Element;
 export default Section;
 //# sourceMappingURL=Section.d.ts.map

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

@@ -1,11 +1,24 @@
 import React from 'react';
 import { View, type ImageSourcePropType } from 'react-native';
+import { type UnifiedSource } from '../../utils/MediaSource';
 type UpiHandleProps = {
     label?: string;
     modes?: Record<string, any>;
     showIcon?: boolean;
     iconName?: string;
-    avatarSource?: ImageSourcePropType;
+    /**
+     * Unified avatar source. Accepts a remote URI (raster or `.svg`), an
+     * inline SVG XML string, a `require()` asset, an SVG React component, or
+     * an already-rendered element. See {@link UnifiedSource}. Avatars are
+     * intentionally **not** tinted — the source renders as-is.
+     */
+    source?: UnifiedSource;
+    /**
+     * @deprecated Use `source` instead. Kept as an alias for back-compat.
+     * Accepts the same shapes as `source` plus the legacy
+     * `ImageSourcePropType` from the previous API.
+     */
+    avatarSource?: ImageSourcePropType | UnifiedSource;
     accessibilityLabel?: string;
     accessibilityHint?: string;
     onPress?: () => void;
@@ -21,7 +34,8 @@ type UpiHandleProps = {
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
- * @param {ImageSourcePropType} [props.avatarSource] - Optional custom image source for the avatar.
+ * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web.
+ * @param {ImageSourcePropType|UnifiedSource} [props.avatarSource] - Deprecated alias for `source`; kept for back-compat.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
@@ -34,7 +48,7 @@ type UpiHandleProps = {
  *  - Focus state is mirrored on web only (gated setter).
  *  - Wrapped in `React.memo`.
  */
-declare function UpiHandle({ label, modes: propModes, showIcon, iconName, avatarSource, onPress, onClick, disabled, accessibilityLabel: _accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
+declare function UpiHandle({ label, modes: propModes, showIcon, iconName, source, avatarSource, onPress, onClick, disabled, accessibilityLabel: _accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof UpiHandle>;
 export default _default;
 //# sourceMappingURL=UpiHandle.d.ts.map

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

@@ -1,29 +1,48 @@
-import { AccessibilityProps } from 'react-native';
+import { AccessibilityProps, type StyleProp, type ViewStyle } from 'react-native';
+import { type UnifiedSource } from '../utils/MediaSource';
 type IconProps = AccessibilityProps & {
-    name: string;
+    /**
+     * Built-in icon name from the registry (e.g. `'ic_card'`, `'ic_scan_qr_code'`).
+     * If omitted or not found in the registry, the component falls back to
+     * `source` (when provided).
+     */
+    name?: string;
+    /**
+     * Unified fallback source rendered when `name` is missing or not in the
+     * registry. Accepts a remote URI, an inline SVG XML string, a `require()`
+     * asset, an SVG React component, or an already-rendered element. See
+     * {@link UnifiedSource}. The icon is tinted with `color` so it follows
+     * design-token modes the same way built-in icons do.
+     */
+    source?: UnifiedSource;
     size?: number;
     color?: string;
-    style?: any;
+    style?: StyleProp<ViewStyle>;
 };
 /**
- * Generic Icon Component
+ * Generic Icon component.
  *
- * Renders an icon from the registry by name with customizable size and color.
- *
- * @component
- * @param {Object} props - Component props
- * @param {string} props.name - Icon name from the registry (e.g., 'ic_ccv', 'ic_card')
- * @param {number} [props.size=24] - Icon size in pixels (width and height)
- * @param {string} [props.color='#141414'] - Icon color (hex, rgb, or named color)
- * @param {Object} [props.style] - Additional styles for the container View
+ * Renders an icon from the registry by `name`, or falls back to a
+ * smart-detected `source` (SVG / PNG / JPG / require / SVG component /
+ * remote URI). External sources are tinted with `color` so they participate
+ * in the design-token modes just like built-in icons.
  *
  * @example
- * ```jsx
+ * ```tsx
+ * // Built-in icon from the registry.
  * <Icon name="ic_ccv" size={24} color="#141414" />
- * <Icon name="ic_card" size={32} color="#5c00b5" />
- * <Icon name="ic_cart" size={20} color="red" />
+ *
+ * // Fallback to a remote SVG (auto-detected by the .svg extension).
+ * <Icon source="https://cdn.example.com/avatar.svg" size={24} color="#5c00b5" />
+ *
+ * // Fallback to a local raster asset.
+ * <Icon source={require('./brand.png')} size={32} />
+ *
+ * // Fallback to an SVG React component (e.g. via react-native-svg-transformer).
+ * import BrandLogo from './brand.svg';
+ * <Icon source={BrandLogo} size={24} color="red" />
  * ```
  */
-declare function Icon({ name, size, color, style, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Icon({ name, source, size, color, style, ...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-04-20T08:18:55.051Z
+ * Generated: 2026-04-21T13:27:57.213Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/lib/typescript/src/utils/MediaSource.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type ImageStyle, type ImageURISource, type StyleProp } from 'react-native';
+/**
+ * A unified, "do-the-right-thing" image source accepted by `MediaSource` and
+ * by the `source` prop on `Icon`, `IconCapsule` and `UpiHandle`.
+ *
+ * Accepts any of:
+ *  - `string`   — a URI (raster or `.svg`) **or** an inline SVG XML document
+ *                 (`'<svg …>…</svg>'`).
+ *  - `number`   — a Metro asset id from `require('./foo.png')`.
+ *  - `{ uri, … }` — the standard RN `ImageURISource` object (works for both
+ *                   raster and `.svg` URIs).
+ *  - `React.ComponentType` — an SVG React component (e.g. produced by
+ *                            `react-native-svg-transformer`, by `@svgr/*`,
+ *                            or hand-written). It is rendered with
+ *                            `{ width, height, color, fill }` so it can be
+ *                            tinted just like a built-in icon.
+ *  - `React.ReactElement`  — an already-rendered node, passed through verbatim.
+ *
+ * The helper sniffs the input shape (no extension hint required from the
+ * caller) and picks the correct renderer for the platform.
+ */
+export type UnifiedSource = string | number | ImageURISource | React.ComponentType<{
+    width?: number;
+    height?: number;
+    color?: string;
+    fill?: string;
+}> | React.ReactElement;
+export type MediaSourceProps = {
+    /** Smart source. See {@link UnifiedSource}. */
+    source: UnifiedSource;
+    /** Convenience shorthand that sets both width and height. */
+    size?: number;
+    width?: number;
+    height?: number;
+    /**
+     * Optional tint applied to the rendered media.
+     *  - Raster `<Image>` → mapped to `style.tintColor` (works on iOS, Android,
+     *    and react-native-web).
+     *  - SVG (XML / URI / component) → mapped to the `color` / `fill` props.
+     *    For an SVG to actually re-color, its source must use `currentColor`
+     *    (or have no hardcoded fill). SVGs with baked-in `fill="#xxx"` cannot
+     *    be re-tinted without parsing — this is a `react-native-svg`
+     *    limitation, not something we can paper over here.
+     */
+    tintColor?: string;
+    /** Extra style merged into the underlying `<Image>` (raster path only). */
+    style?: StyleProp<ImageStyle>;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'center' | 'repeat';
+    accessibilityElementsHidden?: boolean;
+    importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
+};
+/**
+ * Smart renderer that picks the right primitive for the source shape. See
+ * {@link UnifiedSource}.
+ *
+ * Designed to be used internally by `Icon`, `IconCapsule`, and `UpiHandle`,
+ * but also exported for ad-hoc consumer use.
+ */
+declare function MediaSource(props: MediaSourceProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof MediaSource>;
+export default _default;
+//# sourceMappingURL=MediaSource.d.ts.map

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

@@ -1,2 +1,4 @@
 export { cloneChildrenWithModes, flattenChildren } from './react-utils';
+export { default as MediaSource } from './MediaSource';
+export type { UnifiedSource, MediaSourceProps } from './MediaSource';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/Carousel/Carousel.tsx

@@ -102,9 +102,8 @@ export function Carousel({
   const containerPaddingV = parseFloat(
     getVariableByName('carousel/padding/vertical', modes) || '0',
   )
-  const paginationGap = parseFloat(
-    getVariableByName('carousel/pagination/gap', modes) || '12',
-  )
+  // Spacing between the cards row and the pagination dots uses `carousel/gap`.
+  const paginationOffset = gap
 
   // ---- Refs & state ----
   const scrollRef = useRef<ScrollView>(null)
@@ -306,7 +305,7 @@ export function Carousel({
         {showPagination && totalItems > 1 && (
           <Pagination
             modes={modes}
-            style={{ marginTop: paginationGap }}
+            style={{ marginTop: paginationOffset }}
           />
         )}
       </View>
@@ -346,26 +345,26 @@ export function Pagination({ modes: propModes, style }: PaginationProps) {
     useContext(CarouselContext)
   const modes = propModes || ctxModes || {}
 
-  // Token resolution for dots
-  const dotSize = parseFloat(
-    getVariableByName('carousel/pagination/dotSize', modes) || '8',
-  )
-  const dotActiveWidth = parseFloat(
-    getVariableByName('carousel/pagination/dotActiveWidth', modes) || '24',
-  )
+  // Token resolution for dots — matches Figma tokens
+  // (carousel/pagination/gap, carousel/pagination/indicator/{activecolor,inactivecolor,radius}).
+  // Dot dimensions are fixed per Figma spec: inactive 6x6, active 16x6.
+  const dotSize = 6
+  const dotActiveWidth = 16
   const dotGap = parseFloat(
-    getVariableByName('carousel/pagination/dotGap', modes) || '8',
+    getVariableByName('carousel/pagination/gap', modes) || '4',
   )
   const dotColor =
-    (getVariableByName('carousel/pagination/dotColor', modes) as string) ||
-    'rgba(255,255,255,0.35)'
+    (getVariableByName(
+      'carousel/pagination/indicator/inactivecolor',
+      modes,
+    ) as string) || 'rgba(0,0,0,0.3)'
   const dotActiveColor =
     (getVariableByName(
-      'carousel/pagination/dotActiveColor',
+      'carousel/pagination/indicator/activecolor',
       modes,
-    ) as string) || '#ffffff'
+    ) as string) || '#170d0a'
   const dotRadius = parseFloat(
-    getVariableByName('carousel/pagination/dotRadius', modes) || '4',
+    getVariableByName('carousel/pagination/indicator/radius', modes) || '9999',
   )
 
   const containerStyle: ViewStyle = {