jfs-components 0.0.43 → 0.0.45

package/src/components/StatusHero/StatusHero.tsx

@@ -0,0 +1,156 @@
+import React, { isValidElement, cloneElement, type ReactNode } from 'react'
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import MoneyValue from '../MoneyValue/MoneyValue'
+
+export type StatusHeroProps = {
+  /**
+   * Custom media slot content.
+   * Defaults to an IconCapsule above a MoneyValue.
+   * Modes are automatically injected if the slot is a valid React element.
+   */
+  renderMedia?: ReactNode
+  /** Title text displayed below the media slot */
+  title?: string
+  /** Whether to render the title */
+  showTitle?: boolean
+  /** Body/subtitle text displayed below the title */
+  subtitle?: string
+  /** Icon name used in the default media slot */
+  iconName?: string
+  /** Monetary value shown in the default MoneyValue inside the media slot */
+  value?: string
+  /** Currency symbol or ISO code for the default MoneyValue */
+  currency?: string
+  /** Mode configuration for design tokens */
+  modes?: Record<string, any>
+  style?: ViewStyle
+}
+
+/**
+ * StatusHero component that displays a hero section for payment/transaction status screens.
+ *
+ * Contains a media slot (defaults to IconCapsule + MoneyValue) and a content area
+ * with an optional title and a subtitle. All visual values are resolved from Figma
+ * design tokens via `getVariableByName`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StatusHero
+ *   iconName="ic_confirm"
+ *   value="50"
+ *   currency="INR"
+ *   title="You're set to make payments"
+ *   subtitle="₹50 will be auto-invested daily, stay consistent & stay golden."
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+export default function StatusHero({
+  renderMedia,
+  title = "You're set to make payments",
+  showTitle = true,
+  subtitle = '₹50 will be auto-invested daily,\nstay consistent & stay golden.',
+  iconName = 'ic_confirm',
+  value = '50',
+  currency = 'INR',
+  modes: propModes = {},
+  style,
+}: StatusHeroProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+
+  // Container
+  const gap = Number(getVariableByName('statusHero/gap', modes)) || 12
+  const padding = Number(getVariableByName('statusHero/padding', modes)) || 8
+
+  // Media slot wrap (gap between icon and money value in default slot)
+  const slotWrapGap = Number(getVariableByName('statusHero/slotWrap/gap', modes)) || 46
+
+  // Content wrap
+  const contentWrapGap = Number(getVariableByName('statusHero/contentWrap/gap', modes)) || 12
+
+  // Title
+  const titleColor = getVariableByName('statusHero/title/foreground', modes) || '#0c0d10'
+  const titleFontSize = Number(getVariableByName('statusHero/title/fontSize', modes)) || 20
+  const titleFontFamily = getVariableByName('statusHero/title/fontFamily', modes) || 'System'
+  const titleLineHeight = Number(getVariableByName('statusHero/title/lineHeight', modes)) || 22
+  const titleFontWeight = getVariableByName('statusHero/title/fontWeight', modes) || '700'
+
+  // Body
+  const bodyColor = getVariableByName('statusHero/body/foreground', modes) || '#24262b'
+  const bodyFontSize = Number(getVariableByName('statusHero/body/fontSize', modes)) || 14
+  const bodyFontFamily = getVariableByName('statusHero/body/fontFamily', modes) || 'System'
+  const bodyLineHeight = Number(getVariableByName('statusHero/body/lineHeight', modes)) || 17
+  const bodyFontWeight = getVariableByName('statusHero/body/fontWeight', modes) || '500'
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap,
+    padding,
+  }
+
+  const defaultMediaWrapStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: slotWrapGap,
+  }
+
+  const contentWrapStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: contentWrapGap,
+  }
+
+  const titleStyle: TextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight) as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  const bodyStyle: TextStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    fontFamily: bodyFontFamily,
+    lineHeight: bodyLineHeight,
+    fontWeight: String(bodyFontWeight) as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  // Inject modes into the provided slot if it's a valid React element
+  const mediaContent = isValidElement(renderMedia)
+    ? cloneElement(renderMedia as React.ReactElement<any>, { modes })
+    : renderMedia
+
+  const defaultMediaContent = (
+    <View style={defaultMediaWrapStyle}>
+      <IconCapsule
+        iconName={iconName}
+        modes={{ ...modes, 'Icon Capsule Size': 'L', Emphasis: 'High', AppearanceBrand: 'Primary' }}
+      />
+      <MoneyValue
+        value={value}
+        currency={currency}
+        modes={{ ...modes, Context3: 'Balance' }}
+      />
+    </View>
+  )
+
+  return (
+    <View style={[containerStyle, style]}>
+      {mediaContent ?? defaultMediaContent}
+      <View style={contentWrapStyle}>
+        {showTitle && title ? <Text style={titleStyle}>{title}</Text> : null}
+        {subtitle ? <Text style={bodyStyle}>{subtitle}</Text> : null}
+      </View>
+    </View>
+  )
+}

package/src/components/SwappableAmount/SwappableAmount.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Button from '../Button/Button'
+
+export type SwappableAmountProps = {
+  /** Large display value (e.g. "49g"). */
+  value?: string
+  /** Whether to show the schedule button above the value. */
+  schedule?: boolean
+  /** Label text for the schedule button (e.g. "Weekly on Mondays"). */
+  scheduleLabel?: string
+  /** Label text for the amount/swap button (e.g. "₹5100"). */
+  amountLabel?: string
+  /** Callback when the schedule button is pressed. */
+  onSchedulePress?: () => void
+  /** Callback when the amount/swap button is pressed. */
+  onAmountPress?: () => void
+  /** Modes configuration for design token resolution. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: ViewStyle
+}
+
+function SwappableAmount({
+  value = '49g',
+  schedule = false,
+  scheduleLabel = 'Weekly on Mondays',
+  amountLabel = '₹5100',
+  onSchedulePress,
+  onAmountPress,
+  modes = {},
+  style,
+}: SwappableAmountProps) {
+  const gap = getVariableByName('swappableAmount/gap', modes) ?? 24
+  const padding = getVariableByName('swappableAmount/padding', modes) ?? 8
+
+  const foreground = getVariableByName('swappableAmount/foreground', modes) ?? '#0d0d0f'
+  const fontSize = getVariableByName('swappableAmount/fontSize', modes) ?? 56
+  const fontFamily = getVariableByName('swappableAmount/fontFamily', modes) ?? 'System'
+  const fontWeight = getVariableByName('swappableAmount/fontWeight', modes) ?? 900
+  const lineHeight = getVariableByName('swappableAmount/lineHeight', modes) ?? 56
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap as number,
+    padding: padding as number,
+  }
+
+  const valueTextStyle: TextStyle = {
+    color: foreground as string,
+    fontSize: fontSize as number,
+    fontFamily: fontFamily as string,
+    fontWeight: String(fontWeight) as TextStyle['fontWeight'],
+    lineHeight: lineHeight as number,
+  }
+
+  return (
+    <View style={[containerStyle, style]}>
+      {schedule && (
+        <Button
+          label={scheduleLabel}
+          icon="ic_calendar_week"
+          onPress={onSchedulePress}
+          modes={{
+            ...modes,
+            AppearanceBrand: 'Neutral',
+            Emphasis: 'Low',
+            'Button / Size': 'S',
+          }}
+        />
+      )}
+
+      <Text style={valueTextStyle}>{value}</Text>
+
+      <Button
+        label={amountLabel}
+        icon="ic_data_in_out"
+        onPress={onAmountPress}
+        modes={{
+          ...modes,
+          Emphasis: 'Medium',
+          AppearanceBrand: 'Secondary',
+        }}
+      />
+    </View>
+  )
+}
+
+export default SwappableAmount

package/src/components/Tabs/TabItem.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import {
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export interface TabItemProps {
+  /** Label text to display */
+  label?: string
+  /** Whether this tab item is currently active/selected */
+  active?: boolean
+  /** Callback when this tab item is pressed */
+  onPress?: () => void
+  /** Design token modes for theming */
+  modes?: Record<string, any>
+  /** Override container styles */
+  style?: StyleProp<ViewStyle>
+  /** Override label text styles */
+  labelStyle?: StyleProp<TextStyle>
+  /** Accessibility label for screen readers */
+  accessibilityLabel?: string
+}
+
+/**
+ * Individual tab item used inside the Tabs container.
+ *
+ * Supports idle and active states driven by design tokens.
+ * When active, a bottom indicator bar is shown beneath the label.
+ *
+ * @component
+ * @param {TabItemProps} props
+ */
+function TabItem({
+  label = 'Tab item',
+  active = false,
+  onPress,
+  modes = {},
+  style,
+  labelStyle,
+  accessibilityLabel,
+}: TabItemProps) {
+  const paddingVertical = (getVariableByName('tabItem/padding/vertical', modes) ?? 8) as number
+  const fontFamily = (getVariableByName('tabItem/label/fontFamily', modes) ?? 'JioType Var') as string
+  const fontSize = (getVariableByName('tabItem/label/size', modes) ?? 14) as number
+  const lineHeight = (getVariableByName('tabItem/label/lineHeight', modes) ?? 17) as number
+
+  const idleLabelColor = (getVariableByName('tabItem/idle/label/color', modes) ?? '#303338') as string
+  const activeLabelColor = (getVariableByName('tabItem/active/label/color', modes) ?? '#cea15a') as string
+
+  const labelColor = active ? activeLabelColor : idleLabelColor
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical,
+  }
+
+  const textStyle: TextStyle = {
+    color: labelColor,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight: '500',
+  }
+
+  const indicatorStyle: ViewStyle = {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 2,
+    backgroundColor: activeLabelColor,
+    borderRadius: 1,
+  }
+
+  return (
+    <Pressable
+      style={({ pressed }) => [containerStyle, pressed && { opacity: 0.7 }, style]}
+      onPress={onPress}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active }}
+      accessibilityLabel={accessibilityLabel ?? label}
+    >
+      <Text style={[textStyle, labelStyle]}>{label}</Text>
+      {active && <View style={indicatorStyle} />}
+    </Pressable>
+  )
+}
+
+export default TabItem

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import {
+  ScrollView,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import TabItem from './TabItem'
+
+export interface TabsProps {
+  /**
+   * Tab item children. Each child should be a <TabItem> component.
+   * Modes are automatically forwarded to all TabItem children.
+   */
+  children: React.ReactNode
+  /** Design token modes for theming */
+  modes?: Record<string, any>
+  /**
+   * When true, the tabs row scrolls horizontally (useful for many items).
+   * @default false
+   */
+  scrollable?: boolean
+  /** Override container styles */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Tabs container component that lays out TabItem children horizontally.
+ *
+ * The "Tab items" slot maps to React children — each child should be a
+ * `<TabItem>` element. The `modes` prop is automatically forwarded to
+ * every TabItem child so theming is consistent.
+ *
+ * @component
+ * @param {TabsProps} props
+ *
+ * @example
+ * ```tsx
+ * const [activeIndex, setActiveIndex] = useState(0);
+ *
+ * <Tabs modes={{ 'Color Mode': 'Light' }}>
+ *   <TabItem label="Tab 1" active={activeIndex === 0} onPress={() => setActiveIndex(0)} />
+ *   <TabItem label="Tab 2" active={activeIndex === 1} onPress={() => setActiveIndex(1)} />
+ *   <TabItem label="Tab 3" active={activeIndex === 2} onPress={() => setActiveIndex(2)} />
+ * </Tabs>
+ * ```
+ */
+function Tabs({
+  children,
+  modes = {},
+  scrollable = false,
+  style,
+}: TabsProps) {
+  const gap = (getVariableByName('tabs/gap', modes) ?? 16) as number
+  const paddingTop = (getVariableByName('tabs/padding/top', modes) ?? 0) as number
+  const paddingBottom = (getVariableByName('tabs/padding/bottom', modes) ?? 0) as number
+  const paddingLeft = (getVariableByName('tabs/padding/left', modes) ?? 0) as number
+  const paddingRight = (getVariableByName('tabs/padding/right', modes) ?? 0) as number
+
+  // Forward modes to all TabItem children
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.type === TabItem) {
+      const childElement = child as React.ReactElement<any>;
+      return React.cloneElement(childElement, {
+        modes: { ...modes, ...(childElement.props.modes ?? {}) },
+      })
+    }
+    return child
+  })
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    gap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+  }
+
+  if (scrollable) {
+    return (
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        accessibilityRole="tablist"
+        contentContainerStyle={[containerStyle, style]}
+      >
+        {enhancedChildren}
+      </ScrollView>
+    )
+  }
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="tablist"
+    >
+      {enhancedChildren}
+    </View>
+  )
+}
+
+export { TabItem }
+export default Tabs

package/src/components/Text/Text.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type TextProps = {
+  /** The text content to display. */
+  text?: string
+  /** Modes configuration for design token resolution. */
+  modes?: Record<string, any>
+  /** Style override for the text. */
+  style?: StyleProp<TextStyle>
+  /** Number of lines to limit the text to. */
+  numberOfLines?: number
+}
+
+function Text({
+  text = 'Korem ipsum ',
+  modes = {},
+  style,
+  numberOfLines,
+}: TextProps) {
+  const foreground = getVariableByName('text/foreground', modes) ?? '#000000'
+  const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType'
+  const fontSize = getVariableByName('text/fontSize', modes) ?? 14
+  const fontWeight = getVariableByName('text/fontWeight', modes) ?? '500'
+  const lineHeight = getVariableByName('text/lineHeight', modes) ?? 20
+  const letterSpacing = getVariableByName('text/letterSpacing', modes) ?? -0.5
+
+  const textStyle: TextStyle = {
+    color: foreground as string,
+    fontFamily: fontFamily as string,
+    fontSize: fontSize as number,
+    fontWeight: String(fontWeight) as TextStyle['fontWeight'],
+    lineHeight: lineHeight as number,
+    letterSpacing: letterSpacing as number,
+  }
+
+  return (
+    <RNText
+      style={[textStyle, style]}
+      numberOfLines={numberOfLines}
+    >
+      {text}
+    </RNText>
+  )
+}
+
+export default Text

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,122 @@
+import React, { useCallback, useState } from 'react'
+import {
+  Pressable,
+  View,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export interface ToggleProps {
+  /** Whether the toggle is on (controlled) */
+  value?: boolean
+  /** Initial value (uncontrolled) */
+  defaultValue?: boolean
+  /** Callback when the toggle state changes */
+  onValueChange?: (value: boolean) => void
+  /** Whether the toggle is disabled */
+  disabled?: boolean
+  /** Design token modes for theming */
+  modes?: Record<string, any>
+  /** Override container styles */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for screen readers */
+  accessibilityLabel?: string
+}
+
+/**
+ * Toggle (switch) component that maps directly to the Figma design using design tokens.
+ *
+ * Supports controlled and uncontrolled usage, on/off states, and disabled state.
+ * All styling is driven by design tokens with optional mode overrides.
+ *
+ * @component
+ * @param {ToggleProps} props
+ */
+function Toggle({
+  value: controlledValue,
+  defaultValue = false,
+  onValueChange,
+  disabled = false,
+  modes = {},
+  style,
+  accessibilityLabel,
+}: ToggleProps) {
+  const isControlled = controlledValue !== undefined
+  const [internalValue, setInternalValue] = useState(defaultValue)
+  const isOn = isControlled ? controlledValue : internalValue
+
+  const toggleState = disabled
+    ? (isOn ? 'Disabled On' : 'Disabled Off')
+    : (isOn ? 'On' : 'Off')
+  const resolvedModes = { ...modes, 'Toggle States': toggleState }
+
+  const width = getVariableByName('toggle/width', resolvedModes) ?? 52
+  const radius = getVariableByName('toggle/radius', resolvedModes) ?? 100
+  const paddingTrack = getVariableByName('toggle/padding/track', resolvedModes) ?? 3
+  const background = getVariableByName('toggle/background', resolvedModes) ?? (isOn ? '#5d00b5' : '#c7c7cc')
+
+  const thumbSize = getVariableByName('toggle/thumb/size', resolvedModes) ?? 25
+  const thumbRadius = getVariableByName('toggle/thumb/radius', resolvedModes) ?? 100
+  const thumbBackground = getVariableByName('toggle/thumb/background', resolvedModes) ?? '#ffffff'
+  const thumbShadowColor = getVariableByName('toggle/thumb/shadow/color', resolvedModes) ?? 'rgba(0,0,0,0.18)'
+  const thumbShadowRadius = getVariableByName('toggle/thumb/shadow/radius', resolvedModes) ?? 4
+  const thumbShadowOffsetX = getVariableByName('toggle/thumb/shadow/offsetX', resolvedModes) ?? 0
+  const thumbShadowOffsetY = getVariableByName('toggle/thumb/shadow/offsetY', resolvedModes) ?? 2
+
+  const trackHeight = (thumbSize as number) + (paddingTrack as number) * 2
+
+  const handlePress = useCallback(() => {
+    if (disabled) return
+    const next = !isOn
+    if (!isControlled) {
+      setInternalValue(next)
+    }
+    onValueChange?.(next)
+  }, [disabled, isOn, isControlled, onValueChange])
+
+  const trackStyle: ViewStyle = {
+    width: width as number,
+    height: trackHeight,
+    borderRadius: radius as number,
+    backgroundColor: background as string,
+    padding: paddingTrack as number,
+    justifyContent: 'center',
+    alignItems: isOn ? 'flex-end' : 'flex-start',
+    opacity: disabled ? 0.5 : 1,
+  }
+
+  const thumbShadow: ViewStyle = Platform.OS === 'web'
+    ? { boxShadow: `${thumbShadowOffsetX}px ${thumbShadowOffsetY}px ${thumbShadowRadius}px 0px ${thumbShadowColor}` } as ViewStyle
+    : {
+      shadowColor: thumbShadowColor as string,
+      shadowOffset: { width: thumbShadowOffsetX as number, height: thumbShadowOffsetY as number },
+      shadowRadius: thumbShadowRadius as number,
+      shadowOpacity: 1,
+      elevation: 4,
+    }
+
+  const thumbStyle: ViewStyle = {
+    width: thumbSize as number,
+    height: thumbSize as number,
+    borderRadius: thumbRadius as number,
+    backgroundColor: thumbBackground as string,
+    ...thumbShadow,
+  }
+
+  return (
+    <Pressable
+      style={[trackStyle, style]}
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: isOn, disabled }}
+      accessibilityLabel={accessibilityLabel}
+    >
+      <View style={thumbStyle} />
+    </Pressable>
+  )
+}
+
+export default Toggle

package/src/components/index.ts

@@ -7,6 +7,7 @@ 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 Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
 export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
@@ -25,7 +26,9 @@ export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
+export { default as NoteInput } from './NoteInput/NoteInput';
 export { default as NavArrow } from './NavArrow/NavArrow';
+export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Numpad/Numpad';
 export { default as PageTitle } from './PageTitle/PageTitle';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
@@ -33,6 +36,7 @@ export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
 export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
+export { default as StatusHero, type StatusHeroProps } from './StatusHero/StatusHero';
 export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
 export { Tooltip } from './Tooltip/Tooltip';
 
@@ -46,11 +50,22 @@ export { default as Accordion, type AccordionProps } from './Accordion/Accordion
 export { default as ActionTile, type ActionTileProps } from './ActionTile/ActionTile';
 export { default as Balance, type BalanceProps } from './Balance/Balance';
 export { default as ButtonGroup, type ButtonGroupProps } from './ButtonGroup/ButtonGroup';
+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 SupportText, type SupportTextProps } from './SupportText/SupportText';
 export { default as SupportTextIcon, type SupportTextIconProps } from './SupportText/SupportTextIcon';
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
+export { default as Tabs, type TabsProps } from './Tabs/Tabs';
+export { default as TabItem, type TabItemProps } from './Tabs/TabItem';
 export { default as Toast, type ToastProps } from './Toast/Toast';
 export { default as ToastProvider, type ToastProviderProps } from './Toast/ToastProvider';
 export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
+export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
+export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
+export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
+export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
+export { default as OTP, type OTPProps } from './OTP/OTP';
+export { default as StatItem, type StatItemProps } from './StatItem/StatItem';
+export { default as Text, type TextProps } from './Text/Text';
+export { default as Toggle, type ToggleProps } from './Toggle/Toggle';