jfs-components 0.1.8 → 0.1.17

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/ActionFooter/ActionFooter.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import IconButton from '../IconButton/IconButton'
 import type { Modes } from '../../design-tokens'
 
@@ -37,8 +38,6 @@ export type ActionFooterProps = {
   accessibilityLabel?: string
 }
 
-const IS_WEB = Platform.OS === 'web'
-
 // ---------------------------------------------------------------------------
 // Yoga-safe stretch
 // ---------------------------------------------------------------------------
@@ -67,28 +66,12 @@ const STRETCH_STYLE: ViewStyle = {
   minWidth: 0,
 }
 
-// Platform-specific drop shadow. Web boxShadow can't go through
-// Platform.select (RN's typed surface doesn't include it) so we keep it as a
-// separate constant and append it below.
-const NATIVE_SHADOW = Platform.select<ViewStyle>({
-  ios: {
-    shadowColor: '#0c0d10',
-    shadowOffset: { width: 0, height: -12 },
-    shadowOpacity: 0.16,
-    shadowRadius: 24,
-  },
-  android: {
-    elevation: 16,
-  },
-  default: {},
-}) as ViewStyle
-
-const WEB_SHADOW = IS_WEB
-  ? ({
-      boxShadow:
-        '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)',
-    } as ViewStyle)
-  : null
+// Upward drop shadow routed through the unified helper: native `boxShadow` on
+// web + RN 0.76+, legacy `shadow*` (iOS) / `elevation` (Android) on older RN.
+const SHADOW = boxShadow(
+  '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)',
+  { elevation: 16 },
+)
 
 // The runtime token a slot child must equal (by reference) to be treated as
 // an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
@@ -200,7 +183,7 @@ function ActionFooter({
       paddingRight: paddingHorizontal,
       paddingTop,
       paddingBottom,
-      ...NATIVE_SHADOW,
+      ...SHADOW,
     }
 
     const slot: ViewStyle = {
@@ -240,7 +223,6 @@ function ActionFooter({
     <Animated.View
       style={[
         containerStyle,
-        WEB_SHADOW,
         style,
         // Counter-translate by the keyboard height on Android so `adjustResize`
         // can't lift the footer above the keyboard (no-op on iOS/web where the

package/src/components/ActionTile/ActionTile.tsx

@@ -40,18 +40,18 @@ export default function ActionTile({
     const modes = { ...globalModes, ...propModes }
 
     // Resolve tokens
-    const backgroundColor = getVariableByName('actionTile/background', modes) || '#ffffff'
-    const gap = Number(getVariableByName('actionTile/gap', modes)) || 8
-    const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes)) || 12
-    const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes)) || 16
-    const radius = Number(getVariableByName('actionTile/radius', modes)) || 16
+    const backgroundColor = getVariableByName('actionTile/background', modes)
+    const gap = Number(getVariableByName('actionTile/gap', modes))
+    const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes))
+    const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes))
+    const radius = Number(getVariableByName('actionTile/radius', modes))
 
     // Text tokens
-    const textColor = getVariableByName('actionTile/foreground', modes) || '#0d0d0f'
-    const fontSize = Number(getVariableByName('actionTile/fontSize', modes)) || 14
-    const fontFamily = getVariableByName('actionTile/fontFamily', modes) || 'JioType Var'
-    const fontWeightStr = getVariableByName('actionTile/fontWeight', modes) || '500'
-    const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes)) || 17
+    const textColor = getVariableByName('actionTile/foreground', modes)
+    const fontSize = Number(getVariableByName('actionTile/fontSize', modes))
+    const fontFamily = getVariableByName('actionTile/fontFamily', modes)
+    const fontWeightStr = getVariableByName('actionTile/fontWeight', modes)
+    const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes))
 
     const containerStyle: ViewStyle = {
         backgroundColor,

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

@@ -37,9 +37,9 @@ const AmountInput = forwardRef<View, AmountInputProps>(function AmountInput({
     const modes = { ...globalModes, ...propModes }
 
     // Resolve tokens
-    const gap = Number(getVariableByName('amountInput/gap', modes)) || 16
-    const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes)) || 0
-    const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes)) || 0
+    const gap = Number(getVariableByName('amountInput/gap', modes))
+    const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes))
+    const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes))
 
     const containerStyle: ViewStyle = {
         flexDirection: 'column',

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>
@@ -1025,7 +1035,7 @@ function ChartTooltip({
     const bg = (getVariableByName('tooltip/background', modes) as string | null) ?? '#0f0d0a'
     const paddingH = toNumber(getVariableByName('tooltip/padding/horizontal', modes), 12)
     const paddingV = toNumber(getVariableByName('tooltip/padding/vertical', modes), 8)
-    const radius = toNumber(getVariableByName('radius', modes), 8)
+    const radius = 8
     const labelColor = (getVariableByName('tooltip/label/color', modes) as string | null) ?? '#ffffff'
 
     if (items.length === 0) return null
@@ -1101,7 +1111,7 @@ function ChartLegend() {
 /** Resolve `axisItem/*` typography tokens into a memoized text style. */
 function useAxisTypography(modes: Modes) {
     return useMemo(() => {
-        const color = (getVariableByName('axisItem/color', modes) as string | null) ?? '#000000'
+        const color = (getVariableByName('axisItem/fg', modes) as string | null) ?? '#000000'
         const fontFamily =
             (getVariableByName('axisItem/fontFamily', modes) as string | null) ?? 'JioType Var'
         const fontSize = toNumber(getVariableByName('axisItem/fontSize', modes), 12)

package/src/components/Attached/Attached.tsx

@@ -189,7 +189,7 @@ function Attached({
   // anchor centering intact).
   const slotBorderStyle = useMemo<ViewStyle | null>(() => {
     const borderColor = getVariableByName('attached/slot/border', modes)
-    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes) || '0')
+    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes))
     if (!borderColor || !(borderWidth > 0)) return null
 
     // Match the inner clip radius so the ring stays concentric. The outer edge

package/src/components/Avatar/Avatar.tsx

@@ -65,18 +65,18 @@ interface AvatarTokens {
 }
 
 function resolveAvatarTokens(modes: Modes, isMonogram: boolean): AvatarTokens {
-  const size = (getVariableByName('avatar/size', modes) || 29) as number
-  const radiusRaw = (getVariableByName('avatar/radius', modes) || 9999) as number
-  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff'
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)'
-  const borderSize = (getVariableByName('avatar/border/size', modes) || 1) as number
-  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5'
-  const labelFontSize = (getVariableByName('avatar/label/fontSize', modes) || 12) as number
-  const labelLineHeight = (getVariableByName('avatar/label/lineHeight', modes) || 14) as number
-  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes) || 500
+  const size = (getVariableByName('avatar/size', modes)) as number
+  const radiusRaw = (getVariableByName('avatar/radius', modes)) as number
+  const backgroundColor = getVariableByName('avatar/background', modes)
+  const borderColor = getVariableByName('avatar/border/color', modes)
+  const borderSize = (getVariableByName('avatar/border/size', modes)) as number
+  const labelColor = getVariableByName('avatar/label/color', modes)
+  const labelFontSize = (getVariableByName('avatar/label/fontSize', modes)) as number
+  const labelLineHeight = (getVariableByName('avatar/label/lineHeight', modes)) as number
+  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes)
   const labelFontWeight =
     typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw
-  const labelFontFamily = (getVariableByName('avatar/label/fontFamily', modes) || 'Inter') as string
+  const labelFontFamily = (getVariableByName('avatar/label/fontFamily', modes)) as string
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -13,18 +13,18 @@ type AvatarGroupProps = {
 } & React.ComponentProps<typeof View>;
 
 function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGroupProps) {
-    const gap = getVariableByName('avatarGroup/gap', modes) || 0;
+    const gap = getVariableByName('avatarGroup/gap', modes);
 
 
-    const avatarSize = getVariableByName('avatar/size', modes) || 29;
-    const avatarRadius = getVariableByName('avatar/radius', modes) || 9999;
-    const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-    const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+    const avatarSize = getVariableByName('avatar/size', modes);
+    const avatarRadius = getVariableByName('avatar/radius', modes);
+    const borderSize = getVariableByName('avatar/border/size', modes);
+    const borderColor = getVariableByName('avatar/border/color', modes);
 
-    const paddingLeft = getVariableByName('avatarGroup/padding/left', modes) || 0;
-    const paddingRight = getVariableByName('avatarGroup/padding/right', modes) || 0;
-    const paddingTop = getVariableByName('avatarGroup/padding/top', modes) || 0;
-    const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes) || 0;
+    const paddingLeft = getVariableByName('avatarGroup/padding/left', modes);
+    const paddingRight = getVariableByName('avatarGroup/padding/right', modes);
+    const paddingTop = getVariableByName('avatarGroup/padding/top', modes);
+    const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes);
 
     const validChildren = flattenChildren(children);
     const totalChildren = validChildren.length;

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,44 +32,86 @@ 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'
+    (getVariableByName('badge/color/background', modes) as string)
+  const glassBackground =
+    (getVariableByName('badge/glass/color/background', modes) as string)
+  const glassLabelColor =
+    (getVariableByName('badge/glass/color/label', modes) as string)
+  const labelColor = isGlass
+    ? glassLabelColor
+    : (getVariableByName('badge/color/label', modes) as string)
   const fontSize =
-    Number(getVariableByName('badge/label/fontSize', modes) as unknown) || 12
+    Number(getVariableByName('badge/label/fontSize', modes) as unknown)
   const fontFamily =
-    (getVariableByName('badge/fontFamily', modes) as string) || undefined
+    (getVariableByName('badge/fontFamily', modes) as string)
   const fontWeight =
-    (getVariableByName('badge/label/fontWeight', modes) as string) || '600'
+    (getVariableByName('badge/label/fontWeight', modes) as string)
   const paddingHorizontal =
-    Number(getVariableByName('badge/padding/horizontal', modes) as unknown) || 6
+    Number(getVariableByName('badge/padding/horizontal', modes) as unknown)
   const paddingVertical =
-    Number(getVariableByName('badge/padding/vertical', modes) as unknown) || 4
+    Number(getVariableByName('badge/padding/vertical', modes) as unknown)
   const borderRadius =
-    Number(getVariableByName('badge/radius', modes) as unknown) || 4
+    Number(getVariableByName('badge/radius', modes) as unknown)
   const lineHeight =
-    Number(getVariableByName('badge/label/lineHeight', modes) as unknown) ||
-    Math.round(fontSize * 1.2)
+    Number(getVariableByName('badge/label/lineHeight', modes) as unknown)
+  // 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))),
+  )
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded
   // badge would use so the placeholder occupies the same box.
@@ -82,13 +134,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 +171,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 +191,8 @@ function Badge({
   )
 }
 
+const LEADING_WRAP: ViewStyle = { justifyContent: 'center', alignItems: 'center' }
+
 export default Badge