jfs-components 0.0.2 → 0.0.3

package/lib/typescript/components/MoneyValue/MoneyValue.d.ts

@@ -3,10 +3,12 @@ import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-nati
 type MoneyValueProps = {
     value?: string | number;
     currency?: string;
+    negative?: boolean;
     modes?: Record<string, any>;
     style?: StyleProp<ViewStyle>;
     valueStyle?: StyleProp<TextStyle>;
     currencyStyle?: StyleProp<TextStyle>;
+    negativeSignStyle?: StyleProp<TextStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
@@ -20,18 +22,23 @@ type MoneyValueProps = {
  * (e.g. "INR", "USD"). When an ISO code is provided, it will be mapped to the
  * appropriate symbol, with special care to support INR and other major currencies.
  *
+ * Negative values are auto-detected from the value prop (e.g., -500 or "-500").
+ * The `negative` prop can be used to explicitly override this behavior.
+ *
  * @component
  * @param {Object} props
- * @param {string|number} [props.value="500"] - Monetary value to display.
+ * @param {string|number} [props.value="500"] - Monetary value to display. Negative values are auto-detected.
  * @param {string} [props.currency="₹"] - Currency symbol or ISO code (e.g. "INR").
+ * @param {boolean} [props.negative] - Explicitly override negative display. If undefined, auto-detects from value.
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  *                                   Example: {"MoneyValue / Theme": "Default"}
  * @param {Object} [props.style] - Optional container style overrides.
  * @param {Object} [props.valueStyle] - Optional value text style overrides.
  * @param {Object} [props.currencyStyle] - Optional currency text style overrides.
+ * @param {Object} [props.negativeSignStyle] - Optional negative sign text style overrides.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, generates from value and currency
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
-declare function MoneyValue({ value, currency, modes, style, valueStyle, currencyStyle, accessibilityLabel, accessibilityHint, ...rest }: MoneyValueProps): import("react/jsx-runtime").JSX.Element;
+declare function MoneyValue({ value, currency, negative, modes, style, valueStyle, currencyStyle, negativeSignStyle, accessibilityLabel, accessibilityHint, ...rest }: MoneyValueProps): import("react/jsx-runtime").JSX.Element;
 export default MoneyValue;
 //# sourceMappingURL=MoneyValue.d.ts.map

package/lib/typescript/components/MoneyValue/MoneyValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyValue.d.ts","sourceRoot":"","sources":["../../../../src/components/MoneyValue/MoneyValue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAsCzF,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAa,EACb,QAAc,EACd,KAAU,EACV,KAAK,EACL,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,eAAe,2CAoEjB;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"MoneyValue.d.ts","sourceRoot":"","sources":["../../../../src/components/MoneyValue/MoneyValue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAsCzF,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAa,EACb,QAAc,EACd,QAAQ,EACR,KAAU,EACV,KAAK,EACL,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,eAAe,2CA+FjB;AAED,eAAe,UAAU,CAAA"}

package/lib/typescript/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-01-17T17:17:24.583Z
+ * Generated: 2026-01-19T09:31:13.862Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/MoneyValue/MoneyValue.tsx

@@ -40,10 +40,12 @@ const CURRENCY_SYMBOLS = {
 type MoneyValueProps = {
   value?: string | number;
   currency?: string;
+  negative?: boolean;
   modes?: Record<string, any>;
   style?: StyleProp<ViewStyle>;
   valueStyle?: StyleProp<TextStyle>;
   currencyStyle?: StyleProp<TextStyle>;
+  negativeSignStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
@@ -58,29 +60,54 @@ type MoneyValueProps = {
  * (e.g. "INR", "USD"). When an ISO code is provided, it will be mapped to the
  * appropriate symbol, with special care to support INR and other major currencies.
  *
+ * Negative values are auto-detected from the value prop (e.g., -500 or "-500").
+ * The `negative` prop can be used to explicitly override this behavior.
+ *
  * @component
  * @param {Object} props
- * @param {string|number} [props.value="500"] - Monetary value to display.
+ * @param {string|number} [props.value="500"] - Monetary value to display. Negative values are auto-detected.
  * @param {string} [props.currency="₹"] - Currency symbol or ISO code (e.g. "INR").
+ * @param {boolean} [props.negative] - Explicitly override negative display. If undefined, auto-detects from value.
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  *                                   Example: {"MoneyValue / Theme": "Default"}
  * @param {Object} [props.style] - Optional container style overrides.
  * @param {Object} [props.valueStyle] - Optional value text style overrides.
  * @param {Object} [props.currencyStyle] - Optional currency text style overrides.
+ * @param {Object} [props.negativeSignStyle] - Optional negative sign text style overrides.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, generates from value and currency
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
 function MoneyValue({
   value = '500',
   currency = '₹',
+  negative,
   modes = {},
   style,
   valueStyle,
   currencyStyle,
+  negativeSignStyle,
   accessibilityLabel,
   accessibilityHint,
   ...rest
 }: MoneyValueProps) {
+  // Auto-detect negative from value and compute display value
+  const { isNegative, displayValue } = React.useMemo(() => {
+    const stringValue = String(value)
+    const trimmed = stringValue.trim()
+    const valueIsNegative = trimmed.startsWith('-') || (typeof value === 'number' && value < 0)
+    
+    // Strip leading minus sign for display (we show it separately)
+    const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed
+    
+    // Use explicit negative prop if provided, otherwise use auto-detected
+    const showNegative = negative !== undefined ? negative : valueIsNegative
+    
+    return {
+      isNegative: showNegative,
+      displayValue: absoluteValue,
+    }
+  }, [value, negative])
+
   // Resolve typography and layout tokens from Figma
   const textColor =
     getVariableByName('moneyValue/text/color', modes) || '#0f0d0a'
@@ -122,7 +149,7 @@ function MoneyValue({
 
   // Generate default accessibility label from value and currency
   const defaultAccessibilityLabel = accessibilityLabel || 
-    `${resolvedCurrency} ${value}`
+    `${isNegative ? 'negative ' : ''}${resolvedCurrency} ${displayValue}`
 
   return (
     <View 
@@ -132,6 +159,15 @@ function MoneyValue({
       accessibilityHint={accessibilityHint}
       {...rest}
     >
+      {isNegative && (
+        <Text 
+          style={[baseTextStyle, negativeSignStyle]}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        >
+          -
+        </Text>
+      )}
       <Text 
         style={[baseTextStyle, currencyStyle]}
         accessibilityElementsHidden={true}
@@ -144,7 +180,7 @@ function MoneyValue({
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >
-        {value}
+        {displayValue}
       </Text>
     </View>
   )

package/src/icons/registry.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-01-17T17:17:24.583Z
+ * Generated: 2026-01-19T09:31:13.862Z
  */
 
 // Icon name to SVG data mapping