jfs-components 0.0.79 → 0.0.84

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

@@ -19,8 +19,19 @@ export type AppBarProps = {
     /**
      * Slot for the middle content.
      * Often used for "Page Title" in SubPage.
+     *
+     * On `SubPage` this is rendered as an absolutely-centered box (matching the
+     * Figma "slot wrap"): it stays centered in the bar regardless of how wide
+     * the leading/actions slots are, and its content fills/shrinks responsively
+     * within {@link middleSlotWidth}.
      */
     middleSlot?: React.ReactNode;
+    /**
+     * Width of the centered `SubPage` middle slot, in px.
+     * Defaults to the Figma value (192). Has no effect on `MainPage`.
+     * @default 192
+     */
+    middleSlotWidth?: number;
     /**
      * Slot for the actions on the right.
      */
@@ -40,6 +51,6 @@ export type AppBarProps = {
     accessibilityLabel?: string;
     accessibilityHint?: string;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
-export default function AppBar({ type, leadingSlot, middleSlot, actionsSlot, modes: propModes, onLeadingPress, style, accessibilityLabel, accessibilityHint, ...rest }: AppBarProps): import("react/jsx-runtime").JSX.Element;
+export default function AppBar({ type, leadingSlot, middleSlot, middleSlotWidth, actionsSlot, modes: propModes, onLeadingPress, style, accessibilityLabel, accessibilityHint, ...rest }: AppBarProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=AppBar.d.ts.map

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

@@ -18,6 +18,24 @@ export type AttachedProps = Omit<ViewProps, 'children'> & {
      * `modes` are cascaded into it as well.
      */
     badge?: React.ReactNode;
+    /**
+     * Enforces a fixed square size (in px) on the `badge` slot, regardless of
+     * what node is passed. The badge is wrapped in a box of
+     * `badgeSize × badgeSize` with `overflow: 'hidden'`, and the badge content is
+     * stretched to fill it. Use this to guarantee the design-token size even when
+     * a consumer drops in an arbitrary node (e.g. an `Image`) whose intrinsic
+     * size/aspect-ratio would otherwise win.
+     *
+     * When omitted, the badge keeps its own intrinsic size (legacy behavior).
+     */
+    badgeSize?: number;
+    /**
+     * Corner radius used to clip the `badge` box. Only applies when `badgeSize`
+     * is set. Anything that overflows the rounded box (e.g. a non-square image)
+     * is clipped.
+     * @default badgeSize / 2 (a full circle)
+     */
+    badgeRadius?: number;
     /**
      * Anchor point for the `badge` relative to the main content.
      * @default 'bottom-right'
@@ -40,22 +58,7 @@ export type AttachedProps = Omit<ViewProps, 'children'> & {
     modes?: Record<string, any>;
     style?: StyleProp<ViewStyle>;
 };
-/**
- * Attached — overlays a small `badge` on top of arbitrary main content,
- * centered on one of nine anchor points (corners, edge midpoints, or center).
- *
- * The badge straddles the chosen anchor regardless of either element's size:
- * both the main content and the badge are measured via `onLayout`, then the
- * badge is absolutely positioned so its center lands exactly on the anchor.
- *
- * @example
- * ```tsx
- * <Attached position="bottom-right" badge={<InstitutionBadge modes={modes} />} modes={modes}>
- *   <IconCapsule iconName="ic_card" modes={modes} />
- * </Attached>
- * ```
- */
-declare function Attached({ children, badge, position, circular, modes: propModes, style, ...rest }: AttachedProps): import("react/jsx-runtime").JSX.Element;
+declare function Attached({ children, badge, badgeSize, badgeRadius, position, circular, modes: propModes, style, ...rest }: AttachedProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Attached>;
 export default _default;
 //# sourceMappingURL=Attached.d.ts.map

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

@@ -73,8 +73,9 @@ export type DropdownInputProps = {
      */
     menuMaxHeight?: number;
     /**
-     * Pixel offset between the trigger and the popup. Defaults to 4 so the
-     * popup visually peeks below the input.
+     * Pixel gap between the trigger and the popup. When omitted, it defaults
+     * to the `formField/gap` design token so the menu sits the same distance
+     * below the input as the rest of the field's internal spacing.
      */
     menuOffset?: number;
     /**

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

@@ -6,8 +6,8 @@ type ListItemProps = {
     title?: string;
     supportText?: string;
     showSupportText?: boolean;
-    /** Leading slot (Figma "leading"). Defaults to an `IconCapsule` when omitted. */
-    leading?: React.ReactNode;
+    /** Leading slot (Figma "leading"). Omitted or `null` renders nothing. */
+    leading?: React.ReactNode | null;
     supportSlot?: React.ReactNode;
     /** Trailing slot (Figma "trailing"), e.g. `MoneyValue` or `Button`. Horizontal layout only. */
     trailing?: React.ReactNode;
@@ -53,7 +53,7 @@ type ListItemProps = {
  * @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 slot. Defaults to `IconCapsule`.
+ * @param {React.ReactNode|null} [props.leading] - Optional leading slot. Omitted or `null` renders nothing.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
  * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).

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

@@ -15,7 +15,11 @@ export type PaymentFeedbackProps = {
     iconName?: string;
     /** Optional custom media slot that replaces the default IconCapsule */
     renderMedia?: ReactNode;
-    /** Mode configuration for design tokens */
+    /**
+     * Mode configuration for design tokens. Also drives the default
+     * IconCapsule's color — pass `AppearanceSystem: 'positive' | 'warning' |
+     * 'negative'` to render a green/orange/red capsule (defaults to `positive`).
+     */
     modes?: Record<string, any>;
     style?: ViewStyle;
 };

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

@@ -47,18 +47,20 @@ export type PlanComparisonCardProps = {
     columns?: PlanComparisonColumn[];
     /** Feature rows compared across the plan columns. */
     rows?: PlanComparisonRow[];
-    /**
-     * Minimum flex-grow on the label column when the table is given extra
-     * horizontal space. Plan columns always size to their content and never
-     * shrink below it.
-     * @default 0
-     */
-    labelColumnFlex?: number;
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
     modes?: Record<string, any>;
     /** Override the outer container style. */
     style?: StyleProp<ViewStyle>;
 };
-declare function PlanComparisonCard({ columns, rows, labelColumnFlex, modes, style, }: PlanComparisonCardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * PlanComparisonCard renders a compact comparison table that pits the user's
+ * current plan against one or more alternative plans across a set of feature
+ * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
+ *
+ * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
+ *
+ * @component
+ */
+declare function PlanComparisonCard({ columns, rows, modes, style, }: PlanComparisonCardProps): import("react/jsx-runtime").JSX.Element;
 export default PlanComparisonCard;
 //# sourceMappingURL=PlanComparisonCard.d.ts.map

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

@@ -0,0 +1,45 @@
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+/**
+ * Per-segment colours, resolved from the Figma `spiner/*` tokens. Consumers can
+ * override any subset via the `colors` prop.
+ */
+export type SpinnerColors = {
+    /** Leading segment (front of the falling chain). */
+    primary?: string;
+    /** Middle segment. */
+    secondary?: string;
+    /** Trailing segment (tail of the chain). */
+    tertiary?: string;
+};
+type SpinnerBaseProps = Omit<ViewProps, 'children' | 'style'>;
+export type SpinnerProps = SpinnerBaseProps & {
+    /**
+     * Diameter in px. The spinner is always rendered at a 1:1 ratio, so a single
+     * size controls both width and height. Defaults to the Figma size (72).
+     */
+    size?: number;
+    /**
+     * Duration of one full clockwise revolution of the leading segment, in ms.
+     * Lower = faster. Defaults to 2400.
+     */
+    durationMs?: number;
+    /**
+     * "Weightiness" of the fall, in `[0, 0.9]`. 0 = perfectly constant speed;
+     * higher values make segments whip faster over the top and ease through the
+     * bottom. Kept below 1 so the motion never reverses. Defaults to 0.45.
+     */
+    gravity?: number;
+    /** Override any subset of the token-driven segment colours. */
+    colors?: SpinnerColors;
+    /** When false, renders a static resting spinner (also honoured for reduced motion). Defaults to true. */
+    animating?: boolean;
+    /** Design token modes forwarded to token lookups. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label announced to assistive tech. Defaults to "Loading". */
+    accessibilityLabel?: string;
+};
+declare function Spinner({ size, durationMs, gravity, colors, animating, modes: propModes, style, accessibilityLabel, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export default Spinner;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -65,6 +65,7 @@ export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
+export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
 export { StepLabel, type StepLabelProps } from './Stepper/StepLabel';

package/lib/typescript/src/icons/components/IconArrowdown.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconArrowdown: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconArrowdown.d.ts.map

package/lib/typescript/src/icons/components/IconArrowup.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconArrowup: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconArrowup.d.ts.map

package/lib/typescript/src/icons/components/IconChevrondowncircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevrondowncircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevrondowncircle.d.ts.map

package/lib/typescript/src/icons/components/IconChevronleftcircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevronleftcircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevronleftcircle.d.ts.map

package/lib/typescript/src/icons/components/IconChevronrightcircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevronrightcircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevronrightcircle.d.ts.map

package/lib/typescript/src/icons/components/IconChevronupcircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevronupcircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevronupcircle.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavback.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavback: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavback.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavcenter.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavcenter: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavcenter.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavhome.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavhome: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavhome.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavtask.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavtask: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavtask.d.ts.map

package/lib/typescript/src/icons/components/IconSignin.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconSignin: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconSignin.d.ts.map

package/lib/typescript/src/icons/components/IconSignout.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconSignout: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconSignout.d.ts.map

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

@@ -63,10 +63,12 @@ export * from './IconArmed';
 export * from './IconArmedoff';
 export * from './IconArmedpartially';
 export * from './IconArrowback';
+export * from './IconArrowdown';
 export * from './IconArrowline';
 export * from './IconArrowlinediagonal';
 export * from './IconArrowlinedot';
 export * from './IconArrownext';
+export * from './IconArrowup';
 export * from './IconArtificialinsemination';
 export * from './IconAssistivegrid';
 export * from './IconAstrology';
@@ -236,9 +238,13 @@ export * from './IconChemistry';
 export * from './IconCherry';
 export * from './IconChestpain';
 export * from './IconChevrondown';
+export * from './IconChevrondowncircle';
 export * from './IconChevronleft';
+export * from './IconChevronleftcircle';
 export * from './IconChevronright';
+export * from './IconChevronrightcircle';
 export * from './IconChevronup';
+export * from './IconChevronupcircle';
 export * from './IconChildrengame';
 export * from './IconCholesterol';
 export * from './IconCleaning';
@@ -757,6 +763,10 @@ export * from './IconOperatingtable';
 export * from './IconOperator';
 export * from './IconOrder';
 export * from './IconOrders';
+export * from './IconOsnavback';
+export * from './IconOsnavcenter';
+export * from './IconOsnavhome';
+export * from './IconOsnavtask';
 export * from './IconOtp';
 export * from './IconOutofstock';
 export * from './IconOutgoing';
@@ -953,6 +963,8 @@ export * from './IconShutter10s';
 export * from './IconShutter3s';
 export * from './IconShutter5s';
 export * from './IconSign';
+export * from './IconSignin';
+export * from './IconSignout';
 export * from './IconSim';
 export * from './IconSim1';
 export * from './IconSim2';

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-29T17:01:15.629Z
+ * Generated: 2026-06-01T15:33:15.385Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.79",
+  "version": "0.0.84",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -40,7 +40,8 @@
     "icons:generate": "node scripts/generate-icon-registry.js",
     "prepare": "bob build",
     "build": "bob build",
-    "prepack": "yarn icons:generate && bob build"
+    "prepack": "yarn icons:generate && bob build",
+    "push:xpaydemo": "bash scripts/push-to-xpaydemo.sh"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/components/AppBar/AppBar.tsx

@@ -8,6 +8,14 @@ import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 
 type AppBarType = 'MainPage' | 'SubPage'
 
+// SubPage "slot wrap" geometry, taken directly from the Figma design
+// (node 449:7876). The middle slot is an absolutely-centered box of a fixed
+// size; its inner content (node 3991:4125) is a `flex: 1 0 0; min-width: 1px`
+// item so it fills / shrinks responsively within that box.
+const SUBPAGE_MIDDLE_DEFAULT_WIDTH = 192
+const SUBPAGE_MIDDLE_HEIGHT = 32
+const SUBPAGE_MIDDLE_PADDING_HORIZONTAL = 21
+
 export type AppBarProps = {
   /**
    * Type of the App Bar.
@@ -26,8 +34,19 @@ export type AppBarProps = {
   /**
    * Slot for the middle content.
    * Often used for "Page Title" in SubPage.
+   *
+   * On `SubPage` this is rendered as an absolutely-centered box (matching the
+   * Figma "slot wrap"): it stays centered in the bar regardless of how wide
+   * the leading/actions slots are, and its content fills/shrinks responsively
+   * within {@link middleSlotWidth}.
    */
   middleSlot?: React.ReactNode;
+  /**
+   * Width of the centered `SubPage` middle slot, in px.
+   * Defaults to the Figma value (192). Has no effect on `MainPage`.
+   * @default 192
+   */
+  middleSlotWidth?: number;
   /**
    * Slot for the actions on the right.
    */
@@ -52,6 +71,7 @@ export default function AppBar({
   type = 'MainPage',
   leadingSlot,
   middleSlot,
+  middleSlotWidth = SUBPAGE_MIDDLE_DEFAULT_WIDTH,
   actionsSlot,
   modes: propModes = EMPTY_MODES,
   onLeadingPress,
@@ -160,13 +180,39 @@ export default function AppBar({
     ? <View style={actionsStyle}>{cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)}</View>
     : null
 
-  // When there is no middleSlot we want leading & actions pinned to the
-  // outer edges, so we apply `space-between` at the wrapper. With a middle
-  // slot present, the middle (flex: 1) absorbs the remaining space, so
-  // `space-between` is a no-op.
+  // SubPage centers its middle slot via absolute positioning (see Figma
+  // "slot wrap"), so it never participates in the row flow. Only MainPage
+  // keeps the legacy in-flow middle slot.
+  const hasInFlowMiddle = isMain && !!processedMiddle
+
+  // With an in-flow middle (MainPage) the middle (flex: 1) absorbs the
+  // remaining space, so leading & actions sit at the edges naturally. In all
+  // other cases we pin leading & actions to the outer edges with
+  // `space-between`; the SubPage middle floats above, centered.
   const wrapperStyle: ViewStyle = {
     ...containerStyle,
-    justifyContent: processedMiddle ? 'flex-start' : 'space-between',
+    justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between',
+  }
+
+  // Absolutely-centered middle box for SubPage, mirroring the Figma geometry.
+  // `left/top: 50%` + a negative translate keeps it centered regardless of the
+  // bar width, while the fixed width clips overly-wide content (overflow:
+  // hidden) instead of letting it bleed under the leading/actions slots.
+  const subPageMiddleStyle: ViewStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: middleSlotWidth,
+    height: SUBPAGE_MIDDLE_HEIGHT,
+    transform: [
+      { translateX: -middleSlotWidth / 2 },
+      { translateY: -SUBPAGE_MIDDLE_HEIGHT / 2 },
+    ],
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: SUBPAGE_MIDDLE_PADDING_HORIZONTAL,
+    overflow: 'hidden',
   }
 
   return (
@@ -183,14 +229,12 @@ export default function AppBar({
       </View>
 
       {/*
-       * Middle Section — rendered as an in-flow flex item (`flex: 1`) so it
-       * occupies the space between leading and actions but never overflows
-       * past them. This fixes wide children (e.g. <LinearProgress /> with
-       * width: '100%') stretching edge-to-edge under the leading/actions.
-       * `minWidth: 0` is required so the flex item can shrink below its
-       * content's intrinsic width on platforms that respect it (web).
+       * MainPage in-flow middle — occupies the space between leading and
+       * actions (`flex: 1`) without overflowing. `minWidth: 0` lets the flex
+       * item shrink below its content's intrinsic width on platforms that
+       * respect it (web).
        */}
-      {processedMiddle && (
+      {hasInFlowMiddle && (
         <View
           style={{
             flex: 1,
@@ -209,6 +253,29 @@ export default function AppBar({
       <View style={actionsStyle}>
         {processedActions}
       </View>
+
+      {/*
+       * SubPage middle — absolutely centered "slot wrap". The inner wrapper is
+       * a responsive `flex: 1` item (matching Figma's `flex-[1_0_0] min-w-px`)
+       * so its content fills / shrinks within the fixed-width box.
+       */}
+      {isSub && processedMiddle && (
+        <View style={subPageMiddleStyle} pointerEvents="box-none">
+          <View
+            style={{
+              flex: 1,
+              minWidth: 1,
+              height: '100%',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            pointerEvents="box-none"
+          >
+            {processedMiddle}
+          </View>
+        </View>
+      )}
     </View>
   )
 }

package/src/components/Attached/Attached.tsx

@@ -37,6 +37,24 @@ export type AttachedProps = Omit<ViewProps, 'children'> & {
    * `modes` are cascaded into it as well.
    */
   badge?: React.ReactNode
+  /**
+   * Enforces a fixed square size (in px) on the `badge` slot, regardless of
+   * what node is passed. The badge is wrapped in a box of
+   * `badgeSize × badgeSize` with `overflow: 'hidden'`, and the badge content is
+   * stretched to fill it. Use this to guarantee the design-token size even when
+   * a consumer drops in an arbitrary node (e.g. an `Image`) whose intrinsic
+   * size/aspect-ratio would otherwise win.
+   *
+   * When omitted, the badge keeps its own intrinsic size (legacy behavior).
+   */
+  badgeSize?: number
+  /**
+   * Corner radius used to clip the `badge` box. Only applies when `badgeSize`
+   * is set. Anything that overflows the rounded box (e.g. a non-square image)
+   * is clipped.
+   * @default badgeSize / 2 (a full circle)
+   */
+  badgeRadius?: number
   /**
    * Anchor point for the `badge` relative to the main content.
    * @default 'bottom-right'
@@ -89,9 +107,28 @@ function resolveAnchorFractions(position: AttachedPosition): { fx: number; fy: n
  * </Attached>
  * ```
  */
+/**
+ * Stretches the immediate badge child/children to fill the enforced badge box.
+ * Merges `{ width: '100%', height: '100%' }` into each top-level element's
+ * `style` so an arbitrary node (e.g. an `Image` with its own width/aspectRatio)
+ * fills the fixed `badgeSize` box instead of laying out at its intrinsic size.
+ * The wrapping box's `overflow: 'hidden'` clips anything that still overflows.
+ */
+function forceBadgeFill(children: React.ReactNode): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child
+    const childStyle = (child.props as any)?.style
+    return React.cloneElement(child as React.ReactElement<any>, {
+      style: [FILL_STYLE, childStyle],
+    })
+  })
+}
+
 function Attached({
   children,
   badge,
+  badgeSize,
+  badgeRadius,
   position = 'bottom-right',
   circular = true,
   modes: propModes = EMPTY_MODES,
@@ -108,7 +145,7 @@ function Attached({
   )
 
   const [mainSize, setMainSize] = useState<Size>(ZERO_SIZE)
-  const [badgeSize, setBadgeSize] = useState<Size>(ZERO_SIZE)
+  const [measuredBadgeSize, setMeasuredBadgeSize] = useState<Size>(ZERO_SIZE)
 
   const onMainLayout = useCallback((e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout
@@ -117,7 +154,7 @@ function Attached({
 
   const onBadgeLayout = useCallback((e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout
-    setBadgeSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }))
+    setMeasuredBadgeSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }))
   }, [])
 
   const mainChildren = useMemo(
@@ -129,9 +166,21 @@ function Attached({
     [badge, modes]
   )
 
+  // When a fixed size is requested, the badge is wrapped in a clipped box and
+  // its content is force-stretched to fill it (see `forceBadgeFill`).
+  const badgeBoxStyle = useMemo<ViewStyle | null>(() => {
+    if (badgeSize == null) return null
+    return {
+      width: badgeSize,
+      height: badgeSize,
+      borderRadius: badgeRadius ?? badgeSize / 2,
+      overflow: 'hidden',
+    }
+  }, [badgeSize, badgeRadius])
+
   const badgePlacement = useMemo<ViewStyle>(() => {
     const { fx, fy } = resolveAnchorFractions(position)
-    const measured = mainSize.width > 0 && badgeSize.width > 0
+    const measured = mainSize.width > 0 && measuredBadgeSize.width > 0
 
     let anchorX: number
     let anchorY: number
@@ -153,19 +202,23 @@ function Attached({
 
     return {
       position: 'absolute',
-      left: anchorX - badgeSize.width / 2,
-      top: anchorY - badgeSize.height / 2,
+      left: anchorX - measuredBadgeSize.width / 2,
+      top: anchorY - measuredBadgeSize.height / 2,
       // Hide until both elements are measured to avoid a one-frame flash at (0,0).
       opacity: measured ? 1 : 0,
     }
-  }, [position, circular, mainSize, badgeSize])
+  }, [position, circular, mainSize, measuredBadgeSize])
 
   return (
     <View style={[styles.container, style]} {...rest}>
       <View onLayout={onMainLayout}>{mainChildren}</View>
       {badgeChildren != null && (
         <View style={badgePlacement} onLayout={onBadgeLayout} pointerEvents="box-none">
-          {badgeChildren}
+          {badgeBoxStyle != null ? (
+            <View style={badgeBoxStyle}>{forceBadgeFill(badgeChildren)}</View>
+          ) : (
+            badgeChildren
+          )}
         </View>
       )}
     </View>
@@ -178,4 +231,7 @@ const styles = {
   container: { position: 'relative', alignSelf: 'flex-start' } as ViewStyle,
 }
 
+/** Fill style merged into badge content when `badgeSize` enforces a fixed box. */
+const FILL_STYLE = { width: '100%', height: '100%' } as ViewStyle
+
 export default React.memo(Attached)

package/src/components/Checkbox/Checkbox.tsx

@@ -55,12 +55,21 @@ function useFocusVisible() {
 const MIN_TOUCH_TARGET = 44
 
 const touchTargetStyle: ViewStyle = {
-  minWidth: MIN_TOUCH_TARGET,
-  minHeight: MIN_TOUCH_TARGET,
   alignItems: 'center',
   justifyContent: 'center',
 }
 
+/**
+ * Expands the tappable region to the 44pt minimum without changing layout.
+ * `hitSlop` extends the press-responder bounds beyond the visual box on both
+ * native and web (react-native-web ≥ 0.19), so the Pressable keeps its natural
+ * checkbox-sized footprint and sibling alignment stays intact.
+ */
+function invisibleTouchHitSlop(checkboxSize: number) {
+  const slop = Math.max(0, Math.ceil((MIN_TOUCH_TARGET - checkboxSize) / 2))
+  return { top: slop, bottom: slop, left: slop, right: slop }
+}
+
 export interface CheckboxProps {
   /** Whether the checkbox is checked (controlled) */
   checked?: boolean
@@ -216,9 +225,12 @@ function Checkbox({
     ? (disabledActiveMark as string)
     : (selectedMarkColor as string)
 
+  const hitSlop = invisibleTouchHitSlop(size as number)
+
   return (
     <Pressable
       style={[touchTargetStyle, style]}
+      hitSlop={hitSlop}
       onPress={handlePress}
       disabled={disabled}
       onHoverIn={() => setIsHovered(true)}