jfs-components 0.1.30 → 0.1.33

package/lib/module/components/CounterBadge/CounterBadge.js

@@ -0,0 +1,73 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Counter Badge — a small token-driven pill that displays a value.
+ *
+ * All visual attributes resolve from the Figma `counterBadge/*` tokens via
+ * `getVariableByName`.
+ */
+function CounterBadge({
+  value = '99',
+  modes = EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  // Resolve token values (fall back to the Figma defaults for the single
+  // `Default` mode so the badge still renders if a token is missing).
+  const backgroundColor = getVariableByName('counterBadge/background', modes) ?? '#ebebec';
+  const foreground = getVariableByName('counterBadge/foreground', modes) ?? '#0c0d10';
+  const fontFamily = getVariableByName('counterBadge/fontFamily', modes) ?? 'JioType Var';
+  const fontWeightRaw = getVariableByName('counterBadge/fontWeight', modes) ?? 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? String(fontWeightRaw) : fontWeightRaw;
+  const fontSize = Number(getVariableByName('counterBadge/fontSize', modes) ?? 8);
+  const lineHeight = Number(getVariableByName('counterBadge/lineHeight', modes) ?? 8);
+  const paddingHorizontal = Number(getVariableByName('counterBadge/padding/horizontal', modes) ?? 4);
+  // The Figma design pins vertical padding to 4px (matching horizontal), but the
+  // committed variables snapshot resolves `counterBadge/padding/vertical` to 5px
+  // (a stale export). Figma is the source of truth here, so hardcode 4px rather
+  // than trust the token, keeping the badge one pixel shorter to match the design.
+  const paddingVertical = 4;
+  const borderRadius = Number(getVariableByName('counterBadge/radius', modes) ?? 999);
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius,
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(style || {})
+  };
+  const textStyle = {
+    color: foreground,
+    fontFamily,
+    fontWeight: fontWeight,
+    fontSize,
+    lineHeight,
+    textAlign: 'center'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyle,
+    ...rest,
+    children: /*#__PURE__*/_jsx(View, {
+      style: WRAP_STYLE,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: textStyle,
+        children: value
+      })
+    })
+  });
+}
+
+// Figma `wrap` node (data-node-id 7701:10879): min-width 10, centered.
+const WRAP_STYLE = {
+  minWidth: 10,
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+export default CounterBadge;

package/lib/module/components/FavoriteToggle/FavoriteToggle.js

@@ -0,0 +1,174 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { Pressable, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+import GlassFill from '../../utils/GlassFill/GlassFill';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+const IS_IOS = Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+const pressedOverlayStyle = {
+  opacity: 0.7
+};
+// The `favoriteToggle/*` tokens are not yet in the committed variables snapshot,
+// so `getVariableByName` returns undefined and these Figma-node values are used
+// as fallbacks. Once the token export is re-synced the resolver takes over.
+function resolveTokens(modes, isActive) {
+  const width = Number(getVariableByName('favoriteToggle/width', modes) ?? 29);
+  const height = Number(getVariableByName('favoriteToggle/height', modes) ?? 29);
+  const radiusRaw = Number(getVariableByName('favoriteToggle/icon/radius', modes) ?? 9999);
+  const iconSize = Number(getVariableByName('favoriteToggle/icon/width', modes) ?? 20);
+  // 9999 is the design-token sentinel for "perfect circle".
+  const size = Math.max(width, height);
+  const borderRadius = radiusRaw >= 9999 ? size / 2 : radiusRaw;
+
+  // Background + icon color differ per variant. In Figma this is driven by the
+  // `isActive` collection (modes `'False'` / `'True'`), so we pass that mode
+  // through by its string name. Until the `color/favoriteToggle/*` tokens are
+  // exported the resolver returns undefined and the fallbacks below — which
+  // encode the two Figma variants directly — take over.
+  const isActiveMode = {
+    ...modes,
+    isActive: isActive ? 'True' : 'False'
+  };
+  const backgroundColor = getVariableByName('color/favoriteToggle/background/color', isActiveMode) ?? (isActive ? '#ffffff' : '#ffffff33');
+  const iconColor = getVariableByName('color/favoriteToggle/icon/color', isActiveMode) ?? (isActive ? '#cea15a' : '#ffffff');
+
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0-100 intensity scale, the
+  // same mapping Badge's glass path uses.
+  const blurRaw = Number(getVariableByName('blur/minimal', modes) ?? 29);
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(blurRaw)));
+  return {
+    size,
+    borderRadius,
+    backgroundColor,
+    iconColor,
+    iconSize,
+    blurIntensity
+  };
+}
+
+/**
+ * Circular glass favorite (heart) toggle, mirroring the Figma `Favorite Toggle`
+ * component set's boolean `isActive` variant:
+ *   - inactive: translucent frosted circle (`#ffffff33` over a `blur/minimal`
+ *     backdrop) with a white heart.
+ *   - active: solid white circle with a gold (`#cea15a`) heart.
+ * Both variants share the identical filled-heart glyph; only the background and
+ * icon colors change between states.
+ *
+ * Controlled or uncontrolled: pass `isActive` (+ `onChange`) to control it, or
+ * omit `isActive` and use `defaultActive` to let the component own the state.
+ *
+ * Visual attributes resolve from the `favoriteToggle/*` / `color/favoriteToggle/*`
+ * tokens via `getVariableByName`. Those tokens are not yet in the committed
+ * variables snapshot, so the component currently runs on the Figma-node values
+ * as fallbacks; once the tokens are exported (under the `isActive` collection,
+ * modes `False`/`True`) the resolver takes over.
+ */
+function FavoriteToggle({
+  isActive: controlledActive,
+  defaultActive = false,
+  icon = 'ic_favorite',
+  onChange,
+  onPress,
+  modes = EMPTY_MODES,
+  disabled = false,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  style,
+  loading,
+  ...rest
+}) {
+  // Controlled when `isActive` is supplied; otherwise own the state internally
+  // (mirrors the Toggle / SegmentedControl controlled-or-uncontrolled pattern).
+  const isControlled = controlledActive !== undefined;
+  const [internalActive, setInternalActive] = useState(defaultActive);
+  const isActive = isControlled ? controlledActive : internalActive;
+  const tokens = useMemo(() => resolveTokens(modes, isActive), [modes, isActive]);
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
+  const handlePress = useCallback(() => {
+    const next = !isActive;
+    if (!isControlled) {
+      setInternalActive(next);
+    }
+    onChange?.(next);
+    onPress?.();
+  }, [isActive, isControlled, onChange, onPress]);
+  const label = accessibilityLabel || 'Favorite';
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress: disabled ? undefined : handlePress,
+    disabled,
+    accessibilityLabel: label,
+    webAccessibilityProps
+  });
+  const baseContainerStyle = {
+    width: tokens.size,
+    height: tokens.size,
+    borderRadius: tokens.borderRadius,
+    // Active is opaque white, so no glass is drawn and the background paints
+    // directly. Inactive keeps the container transparent so the GlassFill blur
+    // (clipped by overflow:hidden) shows through.
+    backgroundColor: isActive ? tokens.backgroundColor : 'transparent',
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: disabled ? 0.5 : 1
+  };
+
+  // Declared before the loading short-circuit so hook order stays stable.
+  const styleCallback = useCallback(({
+    pressed
+  }) => [baseContainerStyle, style, pressed && !disabled ? pressedOverlayStyle : null], [baseContainerStyle, style, disabled]);
+  if (isLoading) {
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "other",
+      width: tokens.size,
+      height: tokens.size,
+      style: [{
+        borderRadius: tokens.borderRadius
+      }, style],
+      modes: modes
+    });
+  }
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: IS_WEB ? 'switch' : 'button',
+    accessibilityLabel: undefined,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled,
+      checked: isActive,
+      ...accessibilityState
+    },
+    onPress: disabled ? undefined : handlePress,
+    disabled: disabled,
+    unstable_pressDelay: PRESS_DELAY,
+    style: styleCallback,
+    ...webProps,
+    children: [!isActive ? /*#__PURE__*/_jsx(GlassFill, {
+      tint: "light",
+      intensity: tokens.blurIntensity,
+      overlayColor: tokens.backgroundColor,
+      androidTintWash: false
+    }) : null, /*#__PURE__*/_jsx(Icon, {
+      name: icon,
+      size: tokens.iconSize,
+      color: tokens.iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })]
+  });
+}
+export default /*#__PURE__*/React.memo(FavoriteToggle);

package/lib/module/components/HelloJioInput/HelloJioInput.js

@@ -0,0 +1,281 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, View, TextInput as RNTextInput } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import Icon from '../../icons/Icon';
+import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils';
+import GlassFill from '../../utils/GlassFill/GlassFill';
+import IconButton from '../IconButton/IconButton';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+const STATE_COLLECTION = 'HelloJioInput State';
+
+/** Default IconButton modes matching the Figma send control. */
+const DEFAULT_SEND_BUTTON_MODES = Object.freeze({
+  AppearanceBrand: 'Primary',
+  'Button / Size': 'S'
+});
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+/**
+ * Fallback values from the Figma `HelloJioInput` component when local token
+ * JSON has not been synced yet. Mode-driven `getVariableByName` wins when
+ * tokens resolve.
+ */
+const STATE_FALLBACKS = {
+  Idle: {
+    background: '#f5f5f5',
+    borderColor: '#f5f5f5',
+    labelColor: '#545961',
+    iconColor: '#545961'
+  },
+  Active: {
+    background: '#ffffff',
+    borderColor: '#b5b5b5',
+    labelColor: '#24262b',
+    iconColor: '#24262b'
+  },
+  IdleJioPlus: {
+    background: '#f5f5f5',
+    borderColor: '#f5f5f5',
+    labelColor: '#545961',
+    iconColor: '#545961'
+  }
+};
+function resolveHelloJioInputTokens(modes, visualState) {
+  const fallback = STATE_FALLBACKS[visualState];
+  const background = getVariableByName('helloJioInput/background', modes) ?? fallback.background;
+  const borderColor = getVariableByName('helloJioInput/border/color', modes) ?? fallback.borderColor;
+  const strokeWidth = toNumber(getVariableByName('helloJioInput/strokeWidth', modes), 1);
+  const gap = toNumber(getVariableByName('helloJioInput/gap', modes), 8);
+  const paddingLeft = toNumber(getVariableByName('helloJioInput/padding/left', modes), 12);
+  const paddingRight = toNumber(getVariableByName('helloJioInput/padding/right', modes), 4);
+  const paddingTop = toNumber(getVariableByName('helloJioInput/padding/top', modes), 4);
+  const paddingBottom = toNumber(getVariableByName('helloJioInput/padding/bottom', modes), 4);
+  const height = toNumber(getVariableByName('helloJioInput/height', modes), 36);
+  const radiusRaw = toNumber(getVariableByName('helloJioInput/radius', modes), 99999);
+  const borderRadius = radiusRaw >= 9999 ? 99999 : radiusRaw;
+  const labelColor = getVariableByName('helloJioInput/label/color', modes) ?? fallback.labelColor;
+  const fontSize = toNumber(getVariableByName('helloJioInput/fontSize', modes), 14);
+  const lineHeight = toNumber(getVariableByName('helloJioInput/lineHeight', modes), 18);
+  const fontFamily = getVariableByName('helloJioInput/fontFamily', modes) ?? 'JioType Var';
+  const fontWeight = toFontWeight(getVariableByName('helloJioInput/fontWeight', modes), '400');
+  const iconColor = getVariableByName('helloJioInput/icon/color', modes) ?? fallback.iconColor;
+  const iconSize = toNumber(getVariableByName('textInput/icon/size', modes) ?? getVariableByName('helloJioInput/icon/size', modes), 18);
+  const blurMinimal = toNumber(getVariableByName('blur/minimal', modes), 29);
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(blurMinimal)));
+  const useGlass = visualState === 'IdleJioPlus';
+  return {
+    containerStyle: {
+      position: 'relative',
+      flexDirection: 'row',
+      alignItems: 'center',
+      // Glass keeps the container transparent so GlassFill shows through.
+      backgroundColor: useGlass ? 'transparent' : background,
+      borderColor,
+      borderWidth: strokeWidth,
+      borderStyle: 'solid',
+      borderRadius,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      paddingBottom,
+      gap,
+      height,
+      overflow: 'hidden',
+      width: '100%'
+    },
+    inputStyle: {
+      flex: 1,
+      color: labelColor,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      // iOS single-line TextInput + explicit lineHeight sits below center —
+      // same quirk TextInput works around. Omit on iOS.
+      ...(Platform.OS === 'ios' ? null : {
+        lineHeight
+      }),
+      padding: 0,
+      margin: 0,
+      minHeight: lineHeight,
+      outlineStyle: 'none',
+      outlineWidth: 0,
+      outlineColor: 'transparent'
+    },
+    iconColor,
+    iconSize,
+    blurIntensity,
+    useGlass
+  };
+}
+
+/**
+ * `HelloJioInput` is the pill-shaped HelloJio prompt field: leading brand
+ * icon, single-line text input, and a gold send `IconButton` on the right.
+ *
+ * Visual state is derived automatically:
+ *  - **Idle** — gray fill, gray label (default)
+ *  - **Active** — white fill + border while focused
+ *  - **IdleJioPlus** — frosted glass when `jioPlus` and unfocused
+ *
+ * @component
+ */
+const HelloJioInput = /*#__PURE__*/forwardRef(function HelloJioInput({
+  placeholder = 'Ask me anything',
+  value,
+  defaultValue = '',
+  onChangeText,
+  onSubmit,
+  leadingIconName = 'ic_hellojio',
+  leading,
+  trailing,
+  sendIconName = 'ic_send_message',
+  jioPlus = false,
+  disabled = false,
+  modes: propModes = EMPTY_MODES,
+  style,
+  inputStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  onFocus,
+  onBlur,
+  returnKeyType = 'send',
+  ...rest
+}, ref) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : uncontrolledValue;
+  const visualState = isFocused ? 'Active' : jioPlus ? 'IdleJioPlus' : 'Idle';
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes,
+    [STATE_COLLECTION]: visualState
+  }), [globalModes, propModes, visualState]);
+  const sendButtonModes = useMemo(() => ({
+    ...DEFAULT_SEND_BUTTON_MODES,
+    ...modes
+  }), [modes]);
+  const tokens = useMemo(() => resolveHelloJioInputTokens(modes, visualState), [modes, visualState]);
+  const handleChangeText = useCallback(text => {
+    if (!isControlled) setUncontrolledValue(text);
+    onChangeText?.(text);
+  }, [isControlled, onChangeText]);
+  const handleSubmit = useCallback(() => {
+    if (disabled) return;
+    onSubmit?.(currentValue);
+  }, [disabled, onSubmit, currentValue]);
+  const handleFocus = useCallback(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = useCallback(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const leadingElement = leading ?? (leadingIconName ? /*#__PURE__*/_jsx(Icon, {
+    name: leadingIconName,
+    size: tokens.iconSize,
+    color: tokens.iconColor
+  }) : null);
+  const processedLeading = leadingElement ? cloneChildrenWithModes(React.Children.toArray(leadingElement), modes) : null;
+  const defaultTrailing = /*#__PURE__*/_jsx(IconButton, {
+    iconName: sendIconName,
+    modes: sendButtonModes,
+    onPress: handleSubmit,
+    disabled: disabled,
+    accessibilityLabel: "Send"
+  });
+  const trailingElement = trailing === undefined ? defaultTrailing : trailing === null ? null : trailing;
+  const processedTrailing = trailingElement ? cloneChildrenWithModes(React.Children.toArray(trailingElement), modes) : null;
+  const a11yLabel = accessibilityLabel ?? (placeholder || 'HelloJio input');
+  const hoverStyle = isHovered && !disabled && !isFocused ? {
+    opacity: 0.95
+  } : {};
+  const containerStyleArray = [tokens.containerStyle, hoverStyle, disabled ? {
+    opacity: 0.5
+  } : null, style];
+  const glassOverlay = getVariableByName('helloJioInput/background', modes) ?? STATE_FALLBACKS.IdleJioPlus.background;
+  const inner = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [tokens.useGlass ? /*#__PURE__*/_jsx(GlassFill, {
+      tint: "light",
+      intensity: tokens.blurIntensity,
+      overlayColor: glassOverlay,
+      androidTintWash: false
+    }) : null, processedLeading ? /*#__PURE__*/_jsx(View, {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: SLOT_CENTER,
+      children: processedLeading
+    }) : null, /*#__PURE__*/_jsx(RNTextInput, {
+      ref: mergeRefs(inputRef, ref),
+      accessibilityLabel: a11yLabel,
+      accessibilityHint: accessibilityHint,
+      placeholder: isFocused ? '' : placeholder,
+      placeholderTextColor: tokens.inputStyle.color,
+      value: currentValue,
+      onChangeText: handleChangeText,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onSubmitEditing: handleSubmit,
+      returnKeyType: returnKeyType,
+      editable: !disabled,
+      style: [tokens.inputStyle, inputStyle],
+      testID: testID,
+      ...rest
+    }), processedTrailing ? /*#__PURE__*/_jsx(View
+    // Keep the send button in the a11y tree — it has its own label.
+    , {
+      style: SLOT_CENTER,
+      children: processedTrailing
+    }) : null]
+  });
+
+  // Same Android focus rule as TextInput: never wrap native TextInput in
+  // Pressable on native (steals the first tap). Web keeps Pressable for
+  // hover + click-anywhere-to-focus.
+  if (IS_WEB) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: containerStyleArray,
+      onHoverIn: () => setIsHovered(true),
+      onHoverOut: () => setIsHovered(false),
+      onPress: () => {
+        if (!disabled) inputRef.current?.focus();
+      },
+      accessible: false,
+      disabled: disabled,
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyleArray,
+    children: inner
+  });
+});
+const SLOT_CENTER = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
+export default /*#__PURE__*/React.memo(HelloJioInput);