@retray-dev/ui-kit 10.2.0 → 12.1.0

package/src/components/Stats/Stats.tsx

@@ -0,0 +1,226 @@
+import React, { useState, useCallback } from 'react'
+import { View, Text, StyleSheet, ViewStyle, LayoutChangeEvent } from 'react-native'
+import { impactLight } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
+import { renderIcon } from '../../utils/icons'
+import { PressableCard } from '../../utils/pressable'
+
+export type StatsVariant = 'elevated' | 'outlined' | 'filled'
+
+export interface StatsProps {
+  value: string
+  label: string
+  description?: string
+  icon?: React.ReactNode
+  iconName?: string
+  iconColor?: string
+  variant?: StatsVariant
+  onPress?: () => void
+  style?: ViewStyle
+  accessibilityLabel?: string
+}
+
+export interface StatsGroupProps {
+  children: React.ReactNode
+  gap?: number
+  style?: ViewStyle
+}
+
+const COMPACT_THRESHOLD = s(150)
+
+function StatsComponent({
+  value,
+  label,
+  description,
+  icon,
+  iconName,
+  iconColor,
+  variant = 'elevated',
+  onPress,
+  style,
+  accessibilityLabel,
+}: StatsProps) {
+  const { colors } = useTheme()
+  const [containerWidth, setContainerWidth] = useState(0)
+
+  const handleLayout = useCallback((e: LayoutChangeEvent) => {
+    const w = e.nativeEvent.layout.width
+    if (w > 0 && w !== containerWidth) {
+      setContainerWidth(w)
+    }
+  }, [containerWidth])
+
+  const handlePress = () => {
+    if (!onPress) return
+    impactLight()
+    onPress()
+  }
+
+  const isCompact = containerWidth > 0 && containerWidth < COMPACT_THRESHOLD && !!(icon ?? iconName)
+
+  const variantStyle: ViewStyle = {
+    elevated: {
+      backgroundColor: colors.card,
+      borderWidth: 0,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.09,
+      shadowRadius: 14,
+      elevation: 4,
+    },
+    outlined: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0,
+    },
+    filled: {
+      backgroundColor: colors.surfaceStrong,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0,
+    },
+  }[variant]
+
+  const iconColorResolved = iconColor ?? colors.primary
+
+  const resolvedIcon = iconName ? renderIcon(iconName, ms(22), iconColorResolved) : icon
+
+  const iconElement = resolvedIcon ? (
+    <View style={styles.iconWrapper}>{resolvedIcon}</View>
+  ) : null
+
+  const valueElement = (
+    <Text style={[styles.value, { color: colors.foreground }]} allowFontScaling={true}>
+      {value}
+    </Text>
+  )
+
+  const cardContent = (
+    <View style={[styles.card, variantStyle, style]} onLayout={handleLayout}>
+      {isCompact ? (
+        <>
+          {iconElement}
+          <View style={styles.compactValue}>{valueElement}</View>
+          <Text style={[styles.label, { color: colors.foregroundSubtle }]} allowFontScaling={true}>
+            {label}
+          </Text>
+          {description ? (
+            <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+              {description}
+            </Text>
+          ) : null}
+        </>
+      ) : (
+        <>
+          <View style={styles.valueRow}>
+            {iconElement}
+            {valueElement}
+          </View>
+          <Text style={[styles.label, { color: colors.foregroundSubtle }]} allowFontScaling={true}>
+            {label}
+          </Text>
+          {description ? (
+            <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+              {description}
+            </Text>
+          ) : null}
+        </>
+      )}
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <PressableCard
+        onPress={handlePress}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+      >
+        {cardContent}
+      </PressableCard>
+    )
+  }
+
+  return cardContent
+}
+
+function StatsGroup({ children, gap = s(12), style }: StatsGroupProps) {
+  return (
+    <View style={[styles.group, { gap }, style]}>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+        const childStyle = (child.props as { style?: ViewStyle }).style
+        const mergedStyle = childStyle
+          ? [childStyle, { alignSelf: 'stretch' as const }]
+          : [{ alignSelf: 'stretch' as const }]
+        return (
+          <View style={styles.groupItem}>
+            {React.cloneElement(
+              child as React.ReactElement<{ style?: ViewStyle }>,
+              { style: mergedStyle as unknown as ViewStyle },
+            )}
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+export const Stats = Object.assign(React.memo(StatsComponent), { Group: StatsGroup })
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    padding: s(16),
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  valueRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: s(8),
+  },
+  iconWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  compactValue: {
+    marginTop: vs(8),
+  },
+  value: {
+    fontFamily: 'Sohne-Bold',
+    fontSize: ms(28),
+    lineHeight: mvs(32),
+    textAlign: 'center',
+  },
+  label: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+    marginTop: vs(8),
+    textAlign: 'center',
+  },
+  description: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(12),
+    lineHeight: mvs(16),
+    marginTop: vs(4),
+    textAlign: 'center',
+  },
+  group: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  groupItem: {
+    flex: 1,
+  },
+})

package/src/components/Stats/index.ts

@@ -0,0 +1,2 @@
+export { Stats } from './Stats'
+export type { StatsProps, StatsVariant, StatsGroupProps } from './Stats'

package/src/components/Text/Text.tsx

@@ -26,6 +26,8 @@ export type TextVariant =
 export interface TextProps extends RNTextProps {
   variant?: TextVariant
   color?: string
+  /** Force uppercase text transformation. Useful for labels, headers, and buttons. */
+  uppercase?: boolean
 }
 
 // Apply scaling to font/line-height values while preserving all other token props
@@ -68,7 +70,7 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
   'button-sm':    'foreground',
 }
 
-function TextBase({ variant = 'body-md', color, style, children, ...props }: TextProps) {
+function TextBase({ variant = 'body-md', color, style, uppercase, children, ...props }: TextProps) {
   warnIfFontsMissing()
   const { colors } = useTheme()
 
@@ -77,7 +79,7 @@ function TextBase({ variant = 'body-md', color, style, children, ...props }: Tex
 
   return (
     <RNText
-      style={[variantStyles[variant], { color: resolvedColor }, style]}
+      style={[variantStyles[variant], { color: resolvedColor }, uppercase && { textTransform: 'uppercase' }, style]}
       allowFontScaling={true}
       {...props}
     >

package/src/fonts.ts

@@ -63,10 +63,3 @@ export const SohneFontNames = [
 
 /** Type for any valid Sohne font family name */
 export type SohneFontName = (typeof SohneFontNames)[number]
-
-/**
- * @deprecated SohneFonts export removed in v10.0.0.
- * Metro cannot resolve require() calls from node_modules reliably.
- * Copy the static SohneFonts boilerplate from CONSUMER.md into your App.tsx instead.
- */
-export const SohneFonts = undefined

package/src/index.ts

@@ -57,6 +57,7 @@ export * from './components/SheetSelect'
 export * from './components/ImageUpload'
 export * from './components/IconPicker'
 export * from './components/NumberStepper'
+export * from './components/Stats'
 // HolographicCard is intentionally NOT re-exported here — it depends on the
 // optional peer @shopify/react-native-skia, so it must stay out of the main
 // barrel's module graph. Deep-import it: '@retray-dev/ui-kit/HolographicCard'.
@@ -64,6 +65,9 @@ export * from './components/NumberStepper'
 // Icon utility
 export { Icon, renderIcon, configureIconFamilies, getValidIconNames } from './utils/icons'
 
+// Color utilities
+export { withAlpha } from './theme/colorUtils'
+
 // Typography utilities
 export { getResponsiveFontSize } from './utils/typography'
 export type { IconProps, IconFamily } from './utils/icons'

package/src/theme/colorUtils.ts

@@ -78,3 +78,12 @@ export function isDark(hex: string): boolean {
   const L = 0.2126 * toLinear(rgb.r) + 0.7152 * toLinear(rgb.g) + 0.0722 * toLinear(rgb.b)
   return L < 0.5
 }
+
+// Convert a hex color to rgba with the given alpha.
+// Returns an rgba() string suitable for use with semi-transparent backgrounds,
+// borders, and overlays.
+export function withAlpha(hex: string, alpha: number): string {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return hex
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`
+}