@retray-dev/ui-kit 10.2.0 → 12.2.0

package/src/components/Skeleton/Skeleton.tsx

@@ -24,6 +24,8 @@ export interface SkeletonProps {
   preset?: SkeletonPreset
   /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
   diameter?: number
+  /** Override the skeleton background color. Defaults to `colors.skeleton`. */
+  backgroundColor?: string
   style?: ViewStyle
 }
 
@@ -33,6 +35,7 @@ export function Skeleton({
   borderRadius = 6,
   preset = 'base',
   diameter = 40,
+  backgroundColor,
   style,
 }: SkeletonProps) {
   const { colors, colorScheme } = useTheme()
@@ -40,7 +43,7 @@ export function Skeleton({
   const [containerWidth, setContainerWidth] = useState(300)
 
   const shimmerHighlight =
-    colorScheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)'
+    colorScheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.07)'
 
   useEffect(() => {
     // Repeats indefinitely on the UI thread — zero JS bridge cost per frame.
@@ -75,7 +78,7 @@ export function Skeleton({
     <View
       style={[
         styles.base,
-        { width: resolvedWidth as number | `${number}%`, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
+        { width: resolvedWidth as number | `${number}%`, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: backgroundColor ?? colors.skeleton },
         style,
       ]}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}

package/src/components/Stats/Stats.tsx

@@ -0,0 +1,254 @@
+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 type StatsSize = 'default' | 'compact'
+
+export interface StatsProps {
+  value: string
+  label: string
+  description?: string
+  icon?: React.ReactNode
+  iconName?: string
+  iconColor?: string
+  variant?: StatsVariant
+  /** `'compact'` reduces everything proportionally for tight grids. */
+  size?: StatsSize
+  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',
+  size = 'default',
+  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 sizeStyles = size === 'compact'
+    ? {
+        valueFontFamily: 'Sohne-SemiBold' as const,
+        valueFontSize: ms(16),
+        valueLineHeight: mvs(20),
+        labelFontSize: ms(11),
+        labelLineHeight: mvs(14),
+        descriptionFontSize: ms(10),
+        descriptionLineHeight: mvs(14),
+        iconSize: ms(18),
+        padding: s(12),
+      }
+    : {
+        valueFontFamily: 'Sohne-Bold' as const,
+        valueFontSize: ms(21),
+        valueLineHeight: mvs(25),
+        labelFontSize: ms(13),
+        labelLineHeight: mvs(18),
+        descriptionFontSize: ms(12),
+        descriptionLineHeight: mvs(16),
+        iconSize: ms(20),
+        padding: s(16),
+      }
+
+  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, sizeStyles.iconSize, iconColorResolved) : icon
+
+  const iconElement = resolvedIcon ? (
+    <View style={styles.iconWrapper}>{resolvedIcon}</View>
+  ) : null
+
+  const valueElement = (
+    <Text style={[styles.value, { color: colors.foreground, fontFamily: sizeStyles.valueFontFamily, fontSize: sizeStyles.valueFontSize, lineHeight: sizeStyles.valueLineHeight }]} allowFontScaling={true}>
+      {value}
+    </Text>
+  )
+
+  const cardContent = (
+    <View style={[styles.card, variantStyle, { padding: sizeStyles.padding }, style]} onLayout={handleLayout}>
+      {isCompact ? (
+        <>
+          {iconElement}
+          <View style={styles.compactValue}>{valueElement}</View>
+          <Text style={[styles.label, { color: colors.foregroundSubtle, fontSize: sizeStyles.labelFontSize, lineHeight: sizeStyles.labelLineHeight }]} allowFontScaling={true}>
+            {label}
+          </Text>
+          {description ? (
+            <Text style={[styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }]} allowFontScaling={true}>
+              {description}
+            </Text>
+          ) : null}
+        </>
+      ) : (
+        <>
+          <View style={styles.valueRow}>
+            {iconElement}
+            {valueElement}
+          </View>
+          <Text style={[styles.label, { color: colors.foregroundSubtle, fontSize: sizeStyles.labelFontSize, lineHeight: sizeStyles.labelLineHeight }]} allowFontScaling={true}>
+            {label}
+          </Text>
+          {description ? (
+            <Text style={[styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }]} 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

@@ -50,6 +50,7 @@ export * from './components/ErrorBoundary'
 export * from './components/PagerDots'
 export * from './components/AppHeader'
 export * from './components/SelectableGrid'
+export * from './components/SelectableCard'
 export * from './components/PricingCard'
 export * from './components/TabBar'
 export * from './components/ImageViewer'
@@ -57,6 +58,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 +66,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})`
+}

package/src/theme/colors.ts

@@ -69,6 +69,12 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     ? lighten(bg, -0.12)
     : darken(bg, 0.08)
 
+  // Skeleton needs higher contrast than surface to be visible.
+  // Light: 10% darken (was 4% via surface — invisible). Dark: 10% lighten.
+  const skeleton = dark
+    ? lighten(bg, -0.10)
+    : darken(bg, 0.10)
+
   const destructiveTint = dark
     ? withAlphaOnDark(t.destructive, 0.15, bg)
     : withAlphaOnWhite(t.destructive, 0.08)
@@ -96,6 +102,7 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,

package/src/theme/types.ts

@@ -29,10 +29,13 @@ export type ResolvedColors = ThemeColors & {
   foregroundSubtle: string   // ~55% — body text, subtitles
   foregroundMuted: string    // ~35% — captions, timestamps, placeholders
 
-  // Surface fills (chips unselected, input bg, tag bg, skeleton)
+  // Surface fills (chips unselected, input bg, tag bg)
   surface: string            // background slightly off-canvas
   surfaceStrong: string      // slightly stronger fill for pressed/hover states
 
+  // Skeleton placeholder — higher contrast than surface for visibility
+  skeleton: string
+
   // Semantic tints (light bg for alert banners, toast backgrounds)
   destructiveTint: string
   destructiveBorder: string