jfs-components 0.0.71 → 0.0.73

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import CheckboxItem from '../CheckboxItem/CheckboxItem'
+
+export type CheckboxGroupProps = {
+  /**
+   * Slot — a list of `CheckboxItem` (or compatible) elements to render inside
+   * the group. The `modes` prop is automatically forwarded to each child.
+   *
+   * When omitted, three default placeholder `CheckboxItem`s are rendered to
+   * mirror the Figma reference for the empty/initial state.
+   */
+  children?: React.ReactNode
+  /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Record<string, any>
+  /** Override container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for the surrounding group. */
+  accessibilityLabel?: string
+}
+
+/**
+ * CheckboxGroup composes a vertical stack of `CheckboxItem`s. Spacing and
+ * padding are driven by the `checkboxGroup/*` design tokens so groups stay
+ * visually consistent across screens.
+ *
+ * The `modes` prop is forwarded recursively to all children — including
+ * `CheckboxItem`s and any element rendered inside their `endSlot`.
+ *
+ * @component
+ * @param {CheckboxGroupProps} props
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup modes={{ 'Color Mode': 'Light' }}>
+ *   <CheckboxItem label="Fixed deposit • 0245" />
+ *   <CheckboxItem label="Recurring deposit • 1182" />
+ *   <CheckboxItem label="Mutual fund • Equity" />
+ * </CheckboxGroup>
+ * ```
+ */
+function CheckboxGroup({
+  children,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+}: CheckboxGroupProps) {
+  const gap = (getVariableByName('checkboxGroup/gap', modes) as number | null) ?? 12
+  const paddingHorizontal =
+    (getVariableByName('checkboxGroup/padding/horizontal', modes) as number | null) ?? 0
+  const paddingVertical =
+    (getVariableByName('checkboxGroup/padding/vertical', modes) as number | null) ?? 0
+
+  const containerStyle: ViewStyle = {
+    width: '100%',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+  }
+
+  const items = children ? (
+    cloneChildrenWithModes(children, modes)
+  ) : (
+    <>
+      <CheckboxItem modes={modes} />
+      <CheckboxItem modes={modes} />
+      <CheckboxItem modes={modes} />
+    </>
+  )
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="list"
+      accessibilityLabel={accessibilityLabel}
+    >
+      {items}
+    </View>
+  )
+}
+
+export default CheckboxGroup

package/src/components/CheckboxItem/CheckboxItem.tsx

@@ -0,0 +1,174 @@
+import React, { useCallback, useState } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Checkbox from '../Checkbox/Checkbox'
+
+export type CheckboxItemProps = {
+  /** Whether the checkbox is checked (controlled). */
+  checked?: boolean
+  /** Initial checked state (uncontrolled). */
+  defaultChecked?: boolean
+  /** Callback fired when the checked state changes. */
+  onValueChange?: (checked: boolean) => void
+  /** Whether the row is disabled — both the checkbox and row press handler are disabled. */
+  disabled?: boolean
+  /** The label text rendered next to the checkbox. */
+  label?: React.ReactNode
+  /**
+   * Optional content rendered on the right side (e.g. a `Button`). When provided,
+   * it receives the same `modes` as the parent. Wrapped in a fixed-width container
+   * matching the Figma `endSlot` design.
+   */
+  endSlot?: React.ReactNode
+  /** Width of the end slot container in pixels. Defaults to 80 to match the Figma reference. */
+  endSlotWidth?: number
+  /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Record<string, any>
+  /** Override container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Override the label text styles. */
+  labelStyle?: StyleProp<TextStyle>
+  /** Accessibility label for screen readers. Defaults to the `label` prop when it is a string. */
+  accessibilityLabel?: string
+}
+
+/**
+ * CheckboxItem composes a `Checkbox`, a label and an optional `endSlot` into a
+ * single horizontal pressable row. Pressing anywhere on the row (outside of the
+ * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
+ *
+ * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
+ * design tokens for typography and spacing.
+ *
+ * @component
+ * @param {CheckboxItemProps} props
+ *
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ *
+ * <CheckboxItem
+ *   label="Fixed deposit • 0245"
+ *   checked={checked}
+ *   onValueChange={setChecked}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function CheckboxItem({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  disabled = false,
+  label = 'Fixed deposit • 0245',
+  endSlot,
+  endSlotWidth = 80,
+  modes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+}: CheckboxItemProps) {
+  const isControlled = controlledChecked !== undefined
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = isControlled ? controlledChecked : internalChecked
+
+  const handleToggle = useCallback(() => {
+    if (disabled) return
+    const next = !isChecked
+    if (!isControlled) {
+      setInternalChecked(next)
+    }
+    onValueChange?.(next)
+  }, [disabled, isChecked, isControlled, onValueChange])
+
+  const gap = (getVariableByName('checkboxItem/gap', modes) as number | null) ?? 8
+  const paddingHorizontal =
+    (getVariableByName('checkboxItem/padding/horizontal', modes) as number | null) ?? 0
+  const paddingVertical =
+    (getVariableByName('checkboxItem/padding/vertical', modes) as number | null) ?? 0
+
+  const labelColor =
+    (getVariableByName('checkboxItem/foreground', modes) as string | null) ?? '#1a1c1f'
+  const labelFontFamily =
+    (getVariableByName('checkboxItem/label/fontFamily', modes) as string | null) ?? 'JioType Var'
+  const labelFontSize =
+    (getVariableByName('checkboxItem/label/fontSize', modes) as number | null) ?? 14
+  const labelLineHeight =
+    (getVariableByName('checkboxItem/label/lineHeight', modes) as number | null) ?? 19
+  const labelFontWeightRaw =
+    getVariableByName('checkboxItem/label/fontWeight', modes) ?? 400
+  const labelFontWeight = String(labelFontWeightRaw) as TextStyle['fontWeight']
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    width: '100%',
+  }
+
+  const resolvedLabelStyle: TextStyle = {
+    flex: 1,
+    minWidth: 0,
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight,
+  }
+
+  const a11yLabel =
+    accessibilityLabel ?? (typeof label === 'string' ? label : undefined)
+
+  return (
+    <Pressable
+      style={[containerStyle, style]}
+      onPress={handleToggle}
+      disabled={disabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isChecked, disabled }}
+      accessibilityLabel={a11yLabel}
+    >
+      <Checkbox
+        checked={isChecked}
+        disabled={disabled}
+        onValueChange={handleToggle}
+        modes={modes}
+        accessibilityLabel={a11yLabel}
+      />
+
+      {label != null && label !== false ? (
+        typeof label === 'string' || typeof label === 'number' ? (
+          <Text style={[resolvedLabelStyle, labelStyle]} selectable={false}>
+            {label}
+          </Text>
+        ) : (
+          <View style={{ flex: 1, minWidth: 0 }}>{label}</View>
+        )
+      ) : null}
+
+      {endSlot ? (
+        <View
+          style={{
+            width: endSlotWidth,
+            flexShrink: 0,
+            alignItems: 'stretch',
+          }}
+        >
+          {cloneChildrenWithModes(endSlot, modes)}
+        </View>
+      ) : null}
+    </Pressable>
+  )
+}
+
+export default CheckboxItem

package/src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -17,6 +17,14 @@ export type CircularProgressBarProps = CircularProgressBarBaseProps & {
   state?: CircularProgressBarState | boolean
   /** Optional formatted value shown in the active state. */
   valueLabel?: string
+  /**
+   * Optional small label rendered above the value inside the ring. Useful for
+   * sizes that have enough room for both a caption and a value (e.g. the
+   * `circularProgressBar Size: M` mode from Figma). When omitted, only the
+   * value is shown — keeping the default S-size compatible with existing
+   * callers.
+   */
+  supportText?: string
   /** Design token modes forwarded to token lookups. */
   modes?: Record<string, any>
   /** Container style override. */
@@ -27,6 +35,8 @@ export type CircularProgressBarProps = CircularProgressBarBaseProps & {
   progressStyle?: StyleProp<ViewStyle>
   /** Value text style override. */
   valueStyle?: StyleProp<TextStyle>
+  /** Support text style override. */
+  supportTextStyle?: StyleProp<TextStyle>
   /** Accessibility label for the whole progress component. */
   accessibilityLabel?: string
 }
@@ -71,16 +81,29 @@ function CircularProgressBar({
   value = 70,
   state = 'Inactive',
   valueLabel,
+  supportText,
   modes: propModes = EMPTY_MODES,
   style,
   trackStyle,
   progressStyle,
   valueStyle,
+  supportTextStyle,
   accessibilityLabel,
   ...rest
 }: CircularProgressBarProps) {
   const { modes: globalModes } = useTokens()
   const modes = { ...globalModes, ...propModes }
+  // The Figma `circularProgressBar/track/color` variable aliases to the same
+  // chain as `progress/color`, so user-selected Brand modes collapse the
+  // track and progress to a single hue. The Figma source of truth always
+  // renders the track as a neutral gray, so we force Neutral/Medium when
+  // resolving the track color while keeping the user modes for everything
+  // else.
+  const trackModes = {
+    ...modes,
+    'AppearanceBrand': 'Neutral',
+    'Emphasis': 'Medium',
+  }
 
   const isActive = state === true || state === 'Active'
   const normalizedValue = clamp(value, 0, 100)
@@ -92,7 +115,7 @@ function CircularProgressBar({
 
   const trackColor = getStrokeColor(
     trackStyle,
-    getVariableByName('circularProgressBar/track/color', modes) as string || '#ebebed'
+    getVariableByName('circularProgressBar/track/color', trackModes) as string || '#ebebed'
   )
   const progressColor = getStrokeColor(
     progressStyle,
@@ -102,10 +125,17 @@ function CircularProgressBar({
   const iconSize = toNumber(getVariableByName('circularProgressBar/icon/size', modes), 24)
 
   const foreground = getVariableByName('circularProgressBar/foreground', modes) as string || '#0d0d0f'
-  const fontSize = toNumber(getVariableByName('circularProgressBar/fontSize', modes), 18)
+  const fontSize = toNumber(getVariableByName('circularProgressBar/value/fontSize', modes), 18)
   const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes) as string || 'JioType Var'
-  const lineHeight = toNumber(getVariableByName('circularProgressBar/lineHeight', modes), 21)
-  const fontWeight = toFontWeight(getVariableByName('circularProgressBar/fontWeight', modes), '700')
+  const lineHeight = toNumber(getVariableByName('circularProgressBar/value/lineHeight', modes), 21)
+  const fontWeight = toFontWeight(getVariableByName('circularProgressBar/value/fontWeight', modes), '700')
+
+  const supportFontSize = toNumber(getVariableByName('circularProgressBar/supportText/fontSize', modes), 11)
+  const supportLineHeight = toNumber(getVariableByName('circularProgressBar/supportText/lineHeight', modes), 13)
+  const supportFontWeight = toFontWeight(
+    getVariableByName('circularProgressBar/supportText/fontWeight', modes),
+    '500'
+  )
 
   const computedContainerStyle: ViewStyle = {
     alignItems: 'center',
@@ -115,13 +145,35 @@ function CircularProgressBar({
     width: size,
   }
 
+  // The text stack (support text + value) is centered inside the ring using
+  // an absolutely-positioned column. Keeping the wrapper absolute (rather
+  // than the individual texts, as in earlier versions) lets multi-line stacks
+  // render correctly without sub-pixel misalignment.
+  const textStackStyle: ViewStyle = {
+    alignItems: 'center',
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+  }
+
   const computedValueStyle: TextStyle = {
     color: foreground,
     fontFamily,
     fontSize,
     fontWeight,
     lineHeight,
-    position: 'absolute',
+    textAlign: 'center',
+  }
+
+  const computedSupportTextStyle: TextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize: supportFontSize,
+    fontWeight: supportFontWeight,
+    lineHeight: supportLineHeight,
     textAlign: 'center',
   }
 
@@ -132,8 +184,14 @@ function CircularProgressBar({
   }
 
   const displayValue = valueLabel ?? String(Math.round(normalizedValue))
+  const hasSupportText = typeof supportText === 'string' && supportText.length > 0
   const defaultAccessibilityLabel =
-    accessibilityLabel ?? (isActive ? `${displayValue} out of 100` : 'Inactive progress')
+    accessibilityLabel ??
+    (isActive
+      ? hasSupportText
+        ? `${supportText}, ${displayValue} out of 100`
+        : `${displayValue} out of 100`
+      : 'Inactive progress')
 
   return (
     <View
@@ -171,9 +229,16 @@ function CircularProgressBar({
       </Svg>
 
       {isActive ? (
-        <Text style={[computedValueStyle, valueStyle]}>
-          {displayValue}
-        </Text>
+        <View style={textStackStyle} pointerEvents="none">
+          {hasSupportText ? (
+            <Text style={[computedSupportTextStyle, supportTextStyle]} numberOfLines={1}>
+              {supportText}
+            </Text>
+          ) : null}
+          <Text style={[computedValueStyle, valueStyle]} numberOfLines={1}>
+            {displayValue}
+          </Text>
+        </View>
       ) : (
         <IconMinus
           width={iconSize}