jfs-components 0.0.70 → 0.0.72

package/src/components/RadioButton/RadioButton.tsx

@@ -1,227 +1,25 @@
-import React, { useMemo, useState } from 'react'
-import {
-    Pressable,
-    View,
-    StyleSheet,
-    Platform,
-    ViewStyle,
-    DimensionValue,
-    StyleProp,
-} from 'react-native'
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
-
-// ---------------------------------------------------------------------------
-// Props
-// ---------------------------------------------------------------------------
-
-export interface RadioButtonProps {
-    /**
-     * Whether the radio button is selected.
-     */
-    selected?: boolean
-    /**
-     * Whether the radio button is disabled.
-     */
-    disabled?: boolean
-    /**
-     * Function to call when the radio button is pressed.
-     */
-    onPress?: () => void
-    /**
-     * Modes object for design-token resolution.
-     */
-    modes?: Record<string, any>
-    /**
-     * Custom style for the radio button container.
-     */
-    style?: StyleProp<ViewStyle>
-    /**
-     * Test ID for testing.
-     */
-    testID?: string
-}
-
-// ---------------------------------------------------------------------------
-// RadioButton
-// ---------------------------------------------------------------------------
-
-export function RadioButton({
-    selected = false,
-    disabled = false,
-    onPress,
-    modes = EMPTY_MODES,
-    style,
-    testID,
-}: RadioButtonProps) {
-    // ---- Refs & State ----
-    const [hovered, setHovered] = useState(false)
-    const [focused, setFocused] = useState(false)
-    const [pressed, setPressed] = useState(false)
-
-    // ---- Dimensions ----
-    const widthStr = getVariableByName('radio/width', modes) || '18'
-    const heightStr = getVariableByName('radio/height', modes) || '18'
-    const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10'
-
-    const width = parseFloat(widthStr?.toString() || '18')
-    const height = parseFloat(heightStr?.toString() || '18')
-    const selectorSize = parseFloat(selectorSizeStr?.toString() || '10')
-
-    // ---- State Logic ----
-    // Priority: Disabled -> Focused -> Hover/Pressed -> Idle
-    // Note: Design treats Active (Pressed) similar to Selected for some styles, 
-    // but usually in Radio Buttons, Pressed is a transient state.
-    // We will map:
-    // - Disabled -> 'disabled'
-    // - Focused -> 'focus'
-    // - Hovered -> 'hover'
-    // - Idle -> 'idle'
-
-    // We handle `selected` as a separate dimension derived from state.
-
-    let visualState = 'idle'
-    if (disabled) {
-        visualState = 'disabled'
-    } else if (focused) {
-        visualState = 'focus'
-    } else if (hovered || pressed) {
-        visualState = 'hover'
-    }
-
-    // Construct token paths based on state + selected
-    let prefix = `radio/${visualState}`
-    if (visualState === 'idle' && selected) {
-        prefix = `radio/selected`
-    } else if (selected) {
-        prefix = `radio/${visualState}Selected`
-    }
-
-    // ---- Colors & Border ----
-
-    const resolveColor = (path: string, fallback: string) => {
-        return getVariableByName(path, modes) || fallback
-    }
-
-    // Background Color
-    let bgColorVar = `${prefix}/background/color`
-    // Fix for disabledSelected weirdness if needed
-    if (visualState === 'disabled' && selected) {
-        // Check specific path from dump: `radio/disabledSelected/background`
-        if (!getVariableByName(`${prefix}/background/color`, modes)) {
-            bgColorVar = `${prefix}/background`
-        }
-    }
-
-    // Border Color
-    let borderColorVar = `${prefix}/border/color`
-
-    // Border Width
-    let borderWidthVar = `${prefix}/border/size`
-    // Fix for huge path: `radio/disabled/radio/disabled/border/size`
-    if (visualState === 'disabled' && !selected) {
-        if (getVariableByName('radio/disabled/radio/disabled/border/size', modes)) {
-            borderWidthVar = 'radio/disabled/radio/disabled/border/size'
-        }
-    }
-
-    // Selector Color
-    let selectorBgVar = `${prefix}/selector/background/color`
-    if (!selected) {
-        selectorBgVar = 'transparent'
-    }
-
-    // Shadows (Glow)
-    let shadowSizeVar = `${prefix}/boxShadow/size`
-    let shadowColorVar = `${prefix}/shadow/color`
-
-    // Resolve Values
-    const backgroundColor = resolveColor(bgColorVar, 'transparent')
-    const borderColor = resolveColor(borderColorVar, 'transparent')
-    const borderWidth = parseFloat(getVariableByName(borderWidthVar, modes)?.toString() || '1')
-    const selectorColor = resolveColor(selectorBgVar, 'transparent')
-
-    const shadowSize = parseFloat(getVariableByName(shadowSizeVar, modes)?.toString() || '0')
-    const shadowColor = resolveColor(shadowColorVar, 'transparent')
-
-    // Styles
-    const containerStyle: any = {
-        width,
-        height,
-        borderRadius: width / 2, // 9999px -> circle
-        borderWidth,
-        borderColor,
-        backgroundColor,
-        justifyContent: 'center',
-        alignItems: 'center',
-        // Web shadow (ring)
-        ...(Platform.OS === 'web' && shadowSize > 0 ? {
-            boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`,
-        } : {}),
-    }
-
-    const selectorStyle: ViewStyle = {
-        width: selectorSize,
-        height: selectorSize,
-        borderRadius: selectorSize / 2,
-        backgroundColor: selectorColor,
-    }
-
-    // Dummy block for token extraction (static analysis)
-    if (false as boolean) {
-        getVariableByName('radio/idle/background/color')
-        getVariableByName('radio/idle/border/color')
-        getVariableByName('radio/selector/size')
-        getVariableByName('radio/width')
-        getVariableByName('radio/height')
-        getVariableByName('radio/background/color')
-        getVariableByName('radio/hover/background/color')
-        getVariableByName('radio/hover/border/color')
-        getVariableByName('radio/hover/boxShadow/size')
-        getVariableByName('radio/hover/shadow/color')
-        getVariableByName('radio/selected/background/color')
-        getVariableByName('radio/selected/border/color')
-        getVariableByName('radio/selected/selector/background/color')
-        getVariableByName('radio/hoverSelected/background/color')
-        getVariableByName('radio/hoverSelected/border/color')
-        getVariableByName('radio/hoverSelected/boxShadow/size')
-        getVariableByName('radio/hoverSelected/shadow/color')
-        getVariableByName('radio/hoverSelected/selector/background/color')
-        getVariableByName('radio/focus/background/color')
-        getVariableByName('radio/focus/border/color')
-        getVariableByName('radio/focus/border/size')
-        getVariableByName('radio/focus/boxShadow/size')
-        getVariableByName('radio/focus/shadow/color')
-        getVariableByName('radio/focusSelected/background/color')
-        getVariableByName('radio/focusSelected/selector/background/color')
-        getVariableByName('radio/focusSelected/border/size')
-        getVariableByName('radio/disabled/radio/disabled/border/size')
-        getVariableByName('radio/disabled/background/color')
-        getVariableByName('radio/disabled/border/color')
-        getVariableByName('radio/disabledSelected/selector/background/color')
-        getVariableByName('radio/disabledSelected/background')
-        getVariableByName('radio/disabledSelected/border/color')
-    }
-
-    return (
-        <Pressable
-            testID={testID}
-            disabled={disabled}
-            onPress={onPress}
-            onHoverIn={() => setHovered(true)}
-            onHoverOut={() => setHovered(false)}
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
-            onPressIn={() => setPressed(true)}
-            onPressOut={() => setPressed(false)}
-            style={({ pressed: isPressed }) => [
-                containerStyle,
-                style,
-            ]}
-        >
-            <View style={selectorStyle} />
-        </Pressable>
-    )
-}
+/**
+ * @deprecated `RadioButton` has been renamed to `Radio`.
+ *
+ * This file is kept as a backward-compatibility shim for teams that may be
+ * importing `RadioButton` directly from this deep path:
+ *
+ *   import RadioButton from 'jfs-components/src/components/RadioButton/RadioButton'
+ *   import { RadioButton, RadioButtonProps } from '...'
+ *
+ * The recommended public import is now:
+ *
+ *   import { Radio, type RadioProps } from 'jfs-components'
+ *
+ * Going forward, this component is called `Radio`. This shim only re-exports
+ * the new `Radio` component under the old `RadioButton` names; please migrate
+ * existing usages to `Radio` at your earliest convenience.
+ */
+
+import { Radio, type RadioProps } from '../Radio/Radio'
+
+export type RadioButtonProps = RadioProps
+
+export const RadioButton = Radio
 
 export default RadioButton

package/src/components/index.ts

@@ -7,19 +7,25 @@ export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
+export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/CardAdvisory'
 export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
+export { default as CardFinancialCondition, type CardFinancialConditionProps } from './CardFinancialCondition/CardFinancialCondition';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
-export { default as CardCTA, type CardCTAProps } from './CardCTA/CardCTA';
+export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA'
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
+export { default as CircularProgressBar, type CircularProgressBarProps } from './CircularProgressBar/CircularProgressBar'
+export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps } from './CircularProgressBarDoted/CircularProgressBarDoted'
+export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating'
+export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
@@ -61,8 +67,14 @@ export { default as ButtonGroup, type ButtonGroupProps } from './ButtonGroup/But
 export { default as CardProviderInfo, type CardProviderInfoProps } from './CardProviderInfo/CardProviderInfo';
 export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSelect';
 export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch';
+export { default as InstitutionBadge, type InstitutionBadgeProps } from './InstitutionBadge/InstitutionBadge';
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
 export { default as SupportTextIcon, type SupportTextIconProps, type SupportTextStatus } from './SupportText/SupportTextIcon';
+export { default as Radio, type RadioProps } from './Radio/Radio';
+/**
+ * @deprecated Use `Radio` instead. `RadioButton` is kept as an alias for
+ * backward compatibility and will be removed in a future major release.
+ */
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
 export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
 export { default as Tabs, type TabsProps } from './Tabs/Tabs';