jfs-components 0.1.2 → 0.1.12

package/lib/typescript/src/utils/react-utils.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { Modes } from '../design-tokens';
 /**
  * A shared, frozen empty modes object.
@@ -20,6 +21,52 @@ export declare const EMPTY_MODES: Readonly<Record<string, any>>;
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 export declare function cloneChildrenWithModes(children: React.ReactNode, modes: Modes, forcedModes?: Modes): React.ReactNode[];
+/**
+ * Merges a style onto each direct (top-level) child element, with the injected
+ * style taking precedence over the child's own style.
+ *
+ * Used by the Stack family to *enforce* cross-axis stretching from the container
+ * itself: a child can set its own `alignSelf` (which, per the flexbox spec,
+ * overrides the parent's `alignItems`), so to guarantee equal heights / full
+ * width regardless of what individual children declare, we append
+ * `{ alignSelf: 'stretch' }` to every direct child.
+ *
+ * @remarks
+ * - Only top-level children are touched. Grandchildren are intentionally left
+ *   alone — we never want to leak layout styles deeper into the tree.
+ * - Non-element children (strings, numbers) are passed through untouched.
+ * - This relies on the child forwarding `style` to its outer/root view. Built-in
+ *   RN primitives and components that spread `style` onto their root honour it;
+ *   a child that fully ignores `style` cannot be forced (this is a hard React
+ *   Native limitation, not something this helper can work around).
+ * - Per Yoga, stretch has no effect on an axis where the child has a *fixed*
+ *   dimension (e.g. an explicit `height` for a row). Such children opt out by
+ *   design; this helper does not strip explicit dimensions.
+ */
+export declare function injectChildStyle(children: React.ReactNode, style: StyleProp<ViewStyle>): React.ReactNode;
+/**
+ * Combines several refs (object refs and/or callback refs) into a single
+ * callback ref. Useful when a component needs to keep its own internal ref to a
+ * node while still honouring a ref forwarded by the consumer.
+ *
+ * @example
+ * const inputRef = useRef<RNTextInput>(null)
+ * <RNTextInput ref={mergeRefs(inputRef, forwardedRef)} />
+ */
+export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined | null>): React.RefCallback<T>;
+export type EllipsizeMode = 'head' | 'middle' | 'tail' | 'clip';
+/**
+ * Resolves the `numberOfLines` / `ellipsizeMode` pair for a `<Text>` based on a
+ * `disableTruncation` flag.
+ *
+ * When `disableTruncation` is `true`, both values are returned as `undefined`
+ * so the text wraps to as many lines as it needs and never shows the trailing
+ * ellipsis. Otherwise the provided values are passed through unchanged.
+ */
+export declare function resolveTruncation(disableTruncation: boolean | undefined, numberOfLines?: number, ellipsizeMode?: EllipsizeMode): {
+    numberOfLines?: number;
+    ellipsizeMode?: EllipsizeMode;
+};
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

package/lib/typescript/src/utils/web-platform-utils.d.ts

@@ -1,3 +1,4 @@
+import type { RefObject } from 'react';
 import type { PressableProps } from 'react-native';
 /**
  * Web-specific props that should NOT be passed to React Native's Pressable component.
@@ -131,6 +132,41 @@ export declare function usePressableWebSupport({ restProps, onPress, disabled, a
     tabIndex?: 0 | -1;
     onKeyDown?: (e: any) => void;
 };
+/**
+ * Detects pointer presses (mouse / touch) that land OUTSIDE the node held by
+ * `containerRef` and invokes `onOutsidePress`.
+ *
+ * Why this exists:
+ * On web, React Native pressables (`Pressable`, `Button`, links, etc.) do not
+ * always claim DOM focus the way a native `<button>`/`<input>` does. As a
+ * result, tapping an *interactive* element outside a focused `<input>` may
+ * never trigger the input's native `blur` event, leaving a field stuck in its
+ * "Active" visual state. Listening for document-level pointer-down in the
+ * capture phase lets a component force a blur (or close a popover, etc.)
+ * regardless of whether the outside target takes focus.
+ *
+ * Behavior & safety:
+ *  - **Web only.** On native (or when `document` is unavailable) this is a
+ *    no-op, so it is safe to call unconditionally.
+ *  - Listeners are attached only while `enabled` is `true`, and are removed on
+ *    cleanup / when disabled — there is no standing global listener.
+ *  - Uses the **capture** phase so it runs before element-level handlers, and
+ *    listens to both `mousedown` and `touchstart` for parity across devices.
+ *  - The latest `onOutsidePress` is read through a ref, so passing a fresh
+ *    inline closure every render does NOT re-subscribe the listener.
+ *
+ * @param containerRef - Ref to the root host node to treat as "inside".
+ * @param onOutsidePress - Called when a pointer press occurs outside the node.
+ * @param enabled - When `false`, no listener is attached. Defaults to `true`.
+ *
+ * @example
+ * ```tsx
+ * const rootRef = useRef<View>(null)
+ * const inputRef = useRef<RNTextInput>(null)
+ * useWebOutsidePress(rootRef, () => inputRef.current?.blur(), isFocused)
+ * ```
+ */
+export declare function useWebOutsidePress(containerRef: RefObject<any>, onOutsidePress: () => void, enabled?: boolean): void;
 /**
  * Type guard to check if running on web platform
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.2",
+  "version": "0.1.12",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -30,6 +30,7 @@
     "lint": "eslint .",
     "build-react": "webpack --mode production",
     "start-react": "webpack-dev-server --config ./webpack.config.js --mode development",
+    "tokens": "node scripts/figma-token-explorer.js",
     "extract-tokens": "node scripts/extract-component-tokens.js",
     "generate-mode-types": "node scripts/generate-mode-types.js",
     "generate-docs": "node scripts/generate-component-docs.js",

package/src/components/Accordion/Accordion.tsx

@@ -14,7 +14,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 // Enable LayoutAnimation on Android
@@ -87,6 +87,12 @@ export type AccordionProps = {
   accessibilityState?: AccessibilityState;
   /** Web-specific accessibility props (only used on web platform) */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 } & React.ComponentProps<typeof View>;
 
 /**
@@ -117,6 +123,7 @@ function Accordion({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: AccordionProps) {
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
@@ -253,7 +260,7 @@ function Accordion({
         ]}
         {...webProps}
       >
-        <Text style={titleStyle} numberOfLines={1}>
+        <Text style={titleStyle} {...resolveTruncation(disableTruncation, 1)}>
           {title}
         </Text>
         <Icon

package/src/components/AccordionCheckbox/AccordionCheckbox.tsx

@@ -11,7 +11,7 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Checkbox from '../Checkbox/Checkbox'
 import Divider from '../Divider/Divider'
 import Icon from '../../icons/Icon'
@@ -52,6 +52,12 @@ export type AccordionCheckboxProps = {
   style?: StyleProp<ViewStyle>
   /** Accessibility label for the header press target. Defaults to `title`. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 /**
@@ -102,6 +108,7 @@ function AccordionCheckbox({
   modes = EMPTY_MODES,
   style,
   accessibilityLabel,
+  disableTruncation,
 }: AccordionCheckboxProps) {
   const isExpandedControlled = controlledExpanded !== undefined
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
@@ -288,11 +295,11 @@ function AccordionCheckbox({
             }
           />
           <View style={textWrapStyle}>
-            <Text style={titleStyle} numberOfLines={1} selectable={false}>
+            <Text style={titleStyle} {...resolveTruncation(disableTruncation, 1)} selectable={false}>
               {title}
             </Text>
             {subtitle ? (
-              <Text style={subtitleStyle} numberOfLines={1} selectable={false}>
+              <Text style={subtitleStyle} {...resolveTruncation(disableTruncation, 1)} selectable={false}>
                 {subtitle}
               </Text>
             ) : null}

package/src/components/AccountCard/AccountCard.tsx

@@ -13,7 +13,7 @@ import {
     type ViewStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
 
@@ -88,6 +88,12 @@ export type AccountCardProps = {
     accessibilityLabel?: string
     /** Accessibility hint forwarded to the underlying `Pressable`. */
     accessibilityHint?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const toNumber = (value: unknown, fallback: number): number => {
@@ -148,6 +154,7 @@ function AccountCard({
     style,
     accessibilityLabel,
     accessibilityHint,
+    disableTruncation,
 }: AccountCardProps) {
     const iconModes = useMemo(
         () =>
@@ -330,12 +337,12 @@ function AccountCard({
                     }}
                 >
                     {title != null && title !== '' ? (
-                        <Text style={titleStyle} numberOfLines={1}>
+                        <Text style={titleStyle} {...resolveTruncation(disableTruncation, 1)}>
                             {title}
                         </Text>
                     ) : null}
                     {showSubtitle ? (
-                        <Text style={subtitleStyle} numberOfLines={1}>
+                        <Text style={subtitleStyle} {...resolveTruncation(disableTruncation, 1)}>
                             {subtitle}
                         </Text>
                     ) : null}

package/src/components/AllocationComparisonChart/AllocationComparisonChart.tsx

@@ -9,7 +9,7 @@ import {
 import Svg, { Line } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
 
@@ -109,6 +109,12 @@ export type AllocationComparisonChartProps = {
     legendStyle?: StyleProp<ViewStyle>
     /** Accessibility label for the whole chart. */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 const DEFAULT_DATA: AllocationSegment[] = [
@@ -162,6 +168,7 @@ type SegmentBarProps = {
     baselineLabel: React.ReactNode
     showMarker: boolean
     theme: SegmentTheme
+    disableTruncation?: boolean
 }
 
 /**
@@ -177,6 +184,7 @@ function SegmentBar({
     baselineLabel,
     showMarker,
     theme,
+    disableTruncation,
 }: SegmentBarProps) {
     const { barWidth, pillRadius, gap, currentColor, baselineColor, lineColor, lineSize, labelStyle } =
         theme
@@ -195,7 +203,7 @@ function SegmentBar({
             accessibilityLabel={segment.accessibilityLabel}
         >
             {showValueLabel ? (
-                <Text numberOfLines={1} style={labelStyle}>
+                <Text {...resolveTruncation(disableTruncation, 1)} style={labelStyle}>
                     {segment.valueLabel}
                 </Text>
             ) : null}
@@ -247,7 +255,7 @@ function SegmentBar({
                                     />
                                 </Svg>
                                 {isShown(baselineLabel) ? (
-                                    <Text numberOfLines={1} style={[labelStyle, { marginLeft: 6 }]}>
+                                    <Text {...resolveTruncation(disableTruncation, 1)} style={[labelStyle, { marginLeft: 6 }]}>
                                         {baselineLabel}
                                     </Text>
                                 ) : null}
@@ -257,7 +265,7 @@ function SegmentBar({
                 ) : null}
             </View>
 
-            <Text numberOfLines={1} style={labelStyle}>
+            <Text {...resolveTruncation(disableTruncation, 1)} style={labelStyle}>
                 {segment.label}
             </Text>
         </View>
@@ -295,6 +303,7 @@ function AllocationComparisonChart({
     chartStyle,
     legendStyle,
     accessibilityLabel,
+    disableTruncation,
 }: AllocationComparisonChartProps) {
     const { modes: globalModes } = useTokens()
     const modes = React.useMemo(
@@ -440,6 +449,7 @@ function AllocationComparisonChart({
                             baselineLabel={baselineLabel}
                             showMarker={showMarker}
                             theme={theme}
+                            disableTruncation={disableTruncation}
                         />
                     )
                 })}

package/src/components/AmountInput/AmountInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { View, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
@@ -27,12 +27,12 @@ export type AmountInputProps = {
  *
  * @component
  */
-export default function AmountInput({
+const AmountInput = forwardRef<View, AmountInputProps>(function AmountInput({
     moneyValueSlot,
     noteInputSlot,
     modes: propModes = EMPTY_MODES,
     style,
-}: AmountInputProps) {
+}: AmountInputProps, ref: React.Ref<View>) {
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
 
@@ -75,9 +75,11 @@ export default function AmountInput({
     }
 
     return (
-        <View style={containerStyle}>
+        <View ref={ref} style={containerStyle}>
             {renderMoneyValueSlot()}
             {renderNoteInputSlot()}
         </View>
     )
-}
+})
+
+export default AmountInput

package/src/components/AreaLineChart/AreaLineChart.tsx

@@ -23,7 +23,7 @@ import {
 import Svg, { Circle, Line, Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
 import {
@@ -149,6 +149,12 @@ export type AreaLineChartProps = {
     children?: React.ReactNode
     /** Accessibility label for the whole chart. */
     accessibilityLabel?: string
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 // --- Internal resolved types ----------------------------------------------
@@ -184,6 +190,7 @@ type ChartContextValue = {
     formatY: (value: number) => React.ReactNode
     showDots: boolean
     modes: Modes
+    disableTruncation?: boolean
 }
 
 const ChartContext = createContext<ChartContextValue | null>(null)
@@ -307,6 +314,7 @@ function AreaLineChart({
     style,
     children,
     accessibilityLabel,
+    disableTruncation,
 }: AreaLineChartProps) {
     const { modes: globalModes } = useTokens()
     const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
@@ -440,6 +448,7 @@ function AreaLineChart({
             formatY,
             showDots,
             modes,
+            disableTruncation,
         }),
         [
             plotWidth,
@@ -459,6 +468,7 @@ function AreaLineChart({
             formatY,
             showDots,
             modes,
+            disableTruncation,
         ]
     )
 
@@ -650,7 +660,7 @@ function ChartYAxis({
     showAxisLine = false,
     formatLabel,
 }: ChartYAxisProps) {
-    const { height, inset, yScale, yTicks, formatY, modes } = useChart()
+    const { height, inset, yScale, yTicks, formatY, modes, disableTruncation } = useChart()
     const typo = useAxisTypography(modes)
     const format = formatLabel ?? formatY
 
@@ -673,7 +683,7 @@ function ChartYAxis({
                             }}
                         >
                             {showLabels ? (
-                                <Text style={typo.style} numberOfLines={1}>
+                                <Text style={typo.style} {...resolveTruncation(disableTruncation, 1)}>
                                     {format(t)}
                                 </Text>
                             ) : null}
@@ -736,7 +746,7 @@ function ChartXAxis({
     selectable = true,
     formatLabel,
 }: ChartXAxisProps) {
-    const { width, inset, xScale, indexXs, count, xLabels, formatX, modes, activeIndex, setActiveIndex } =
+    const { width, inset, xScale, indexXs, count, xLabels, formatX, modes, activeIndex, setActiveIndex, disableTruncation } =
         useChart()
     const typo = useAxisTypography(modes)
     const format = formatLabel ?? formatX
@@ -787,7 +797,7 @@ function ChartXAxis({
                                     typo.style,
                                     isActive ? { color: activeColor, fontWeight: '700' } : null,
                                 ]}
-                                numberOfLines={1}
+                                {...resolveTruncation(disableTruncation, 1)}
                             >
                                 {format(label, i)}
                             </Text>

package/src/components/Badge/Badge.tsx

@@ -7,14 +7,24 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
 import type { Modes } from '../../design-tokens'
+import GlassFill from '../../utils/GlassFill/GlassFill'
 
-type BadgeProps = {
+export type BadgeType = 'default' | 'glass'
+
+export type BadgeProps = {
   /** Visible label text shown inside the badge */
   label?: string
+  /**
+   * Visual style (matches the Figma `type` property). `'default'` is a solid
+   * token-colored pill; `'glass'` is a frosted, translucent pill backed by a
+   * real background blur (`GlassFill`) — the same glass surface used at the
+   * bottom of media/merchandising cards.
+   */
+  type?: BadgeType
   /** Modes used to resolve design tokens (e.g. Appearance, Size) */
   modes?: Modes
   /** Optional press handler to make the badge interactive */
@@ -22,29 +32,66 @@ type BadgeProps = {
   accessibilityLabel?: string
   style?: ViewStyle
   labelStyle?: TextStyle
+  /**
+   * Optional leading node (icon/image) rendered before the label, inside the
+   * badge surface. When present, the badge lays its contents out in a row.
+   */
+  leading?: React.ReactNode
+  /**
+   * Glass-only override for the translucent overlay color painted over the live
+   * blur. Defaults to the `badge/glass/color/background` token. Ignored for the
+   * `'default'` type.
+   */
+  glassOverlayColor?: string
+  /**
+   * Glass-only override for the blur intensity on the 0–100 scale. Defaults to
+   * the `blur/minimal` token. Ignored for the `'default'` type.
+   */
+  glassIntensity?: number
   /**
    * Explicit per-instance loading override. When `true`, renders a
    * badge-shaped skeleton placeholder instead of the badge. Defaults to
    * inheriting from the surrounding `<SkeletonGroup>`.
    */
   loading?: boolean
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel' | 'accessibilityRole'>
 
 function Badge({
   label = 'Label',
+  type = 'default',
   modes = EMPTY_MODES,
   onPress,
   accessibilityLabel,
   style,
   labelStyle,
   loading,
+  disableTruncation,
+  leading,
+  glassOverlayColor,
+  glassIntensity,
   ...rest
 }: BadgeProps) {
-  // Resolve token values (fall back to sensible defaults)
+  const isGlass = type === 'glass'
+  const hasLeading = leading != null
+
+  // Resolve token values (fall back to sensible defaults). The glass type
+  // swaps the solid fill for a translucent overlay + white label, matching the
+  // Figma `badge/glass/*` tokens.
   const backgroundColor =
     (getVariableByName('badge/color/background', modes) as string) || '#d8effe'
-  const labelColor =
-    (getVariableByName('badge/color/label', modes) as string) || '#000000'
+  const glassBackground =
+    (getVariableByName('badge/glass/color/background', modes) as string) || '#ffffff26'
+  const glassLabelColor =
+    (getVariableByName('badge/glass/color/label', modes) as string) || '#ffffff'
+  const labelColor = isGlass
+    ? glassLabelColor
+    : (getVariableByName('badge/color/label', modes) as string) || '#000000'
   const fontSize =
     Number(getVariableByName('badge/label/fontSize', modes) as unknown) || 12
   const fontFamily =
@@ -60,6 +107,12 @@ function Badge({
   const lineHeight =
     Number(getVariableByName('badge/label/lineHeight', modes) as unknown) ||
     Math.round(fontSize * 1.2)
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
+  // same 1:1 mapping the merchandising card footer uses.
+  const blurIntensity = Math.max(
+    0,
+    Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes) as unknown) || 29)),
+  )
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded
   // badge would use so the placeholder occupies the same box.
@@ -82,13 +135,20 @@ function Badge({
   const Container: any = onPress ? Pressable : View
 
   const containerStyle: ViewStyle = {
-    backgroundColor,
+    // Glass keeps the container transparent so the GlassFill blur shows through;
+    // `overflow: 'hidden'` clips the native blur view to the rounded pill (the
+    // blur view does not honor borderRadius itself).
+    backgroundColor: isGlass ? 'transparent' : backgroundColor,
     paddingHorizontal,
     paddingVertical,
     borderRadius,
     alignSelf: 'flex-start',
     alignItems: 'center',
     justifyContent: 'center',
+    // A leading node sits in-line before the label, so switch to a row with a
+    // small gap. Consumer `style` (spread last) can still override either.
+    ...(hasLeading ? { flexDirection: 'row' as const, gap: 4 } : null),
+    ...(isGlass ? { overflow: 'hidden' as const } : null),
     ...((style as any) || {}),
   }
 
@@ -112,10 +172,18 @@ function Badge({
       onPress={onPress}
       {...rest}
     >
+      {isGlass ? (
+        <GlassFill
+          tint="light"
+          intensity={glassIntensity ?? blurIntensity}
+          overlayColor={glassOverlayColor ?? glassBackground}
+          androidTintWash={false}
+        />
+      ) : null}
+      {hasLeading ? <View style={LEADING_WRAP}>{leading}</View> : null}
       <Text
         style={textStyle}
-        numberOfLines={1}
-        ellipsizeMode="tail"
+        {...resolveTruncation(disableTruncation, 1, 'tail')}
         accessibilityElementsHidden={false}
       >
         {label}
@@ -124,6 +192,8 @@ function Badge({
   )
 }
 
+const LEADING_WRAP: ViewStyle = { justifyContent: 'center', alignItems: 'center' }
+
 export default Badge