@retray-dev/ui-kit 12.1.0 → 12.2.0

package/src/components/Sheet/Sheet.tsx

@@ -99,14 +99,21 @@ export function Sheet({
   const insets = useSafeAreaInsets()
   const ref = useRef<BottomSheetModal>(null)
   const wasOpened = useRef(false)
+  const isPresentedRef = useRef(false)
   const name = useId()
 
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false
+    onClose?.()
+  }, [onClose])
+
   useEffect(() => {
-    if (open) {
+    if (open && !isPresentedRef.current) {
       impactMedium()
       ref.current?.present()
       wasOpened.current = true
-    } else if (wasOpened.current) {
+      isPresentedRef.current = true
+    } else if (!open && wasOpened.current && isPresentedRef.current) {
       ref.current?.dismiss()
     }
   }, [open])
@@ -188,7 +195,7 @@ export function Sheet({
       <BottomSheetModal
       ref={ref}
       name={name}
-      onDismiss={onClose}
+      onDismiss={handleDismiss}
       enableDynamicSizing={useDynamicSizing}
       snapPoints={snapPoints}
       maxDynamicContentSize={useDynamicSizing && maxHeight ? maxHeight : undefined}

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

@@ -8,6 +8,7 @@ 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
@@ -17,6 +18,8 @@ export interface StatsProps {
   iconName?: string
   iconColor?: string
   variant?: StatsVariant
+  /** `'compact'` reduces everything proportionally for tight grids. */
+  size?: StatsSize
   onPress?: () => void
   style?: ViewStyle
   accessibilityLabel?: string
@@ -38,6 +41,7 @@ function StatsComponent({
   iconName,
   iconColor,
   variant = 'elevated',
+  size = 'default',
   onPress,
   style,
   accessibilityLabel,
@@ -60,6 +64,30 @@ function StatsComponent({
 
   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,
@@ -86,29 +114,29 @@ function StatsComponent({
 
   const iconColorResolved = iconColor ?? colors.primary
 
-  const resolvedIcon = iconName ? renderIcon(iconName, ms(22), iconColorResolved) : icon
+  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 }]} allowFontScaling={true}>
+    <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, style]} onLayout={handleLayout}>
+    <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 }]} allowFontScaling={true}>
+          <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 }]} allowFontScaling={true}>
+            <Text style={[styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }]} allowFontScaling={true}>
               {description}
             </Text>
           ) : null}
@@ -119,11 +147,11 @@ function StatsComponent({
             {iconElement}
             {valueElement}
           </View>
-          <Text style={[styles.label, { color: colors.foregroundSubtle }]} allowFontScaling={true}>
+          <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 }]} allowFontScaling={true}>
+            <Text style={[styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }]} allowFontScaling={true}>
               {description}
             </Text>
           ) : null}

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'

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