@retray-dev/ui-kit 6.2.0 → 9.0.0

package/src/components/Select/Select.tsx

@@ -60,7 +60,7 @@ export function Select({
       setPendingValue(value)
       setPickerVisible(true)
     } else if (isAndroid) {
-      ;(pickerRef.current as any)?.focus()
+      ;(pickerRef.current as { focus?: () => void })?.focus?.()
     }
   }
 
@@ -234,7 +234,7 @@ const styles = StyleSheet.create({
     gap: vs(8),
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
   },
   trigger: {
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
     paddingVertical: vs(11),
   },
   triggerText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     flex: 1,
   },
@@ -255,7 +255,7 @@ const styles = StyleSheet.create({
     marginLeft: s(8),
   },
   helperText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
   },
   iosBackdrop: {
@@ -276,14 +276,14 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
   },
   iosToolbarTitle: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(17),
   },
   iosDoneBtn: {
     padding: s(4),
   },
   iosDoneBtnText: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(17),
   },
   androidHiddenPicker: {

package/src/components/SelectableGrid/SelectableGrid.tsx

@@ -0,0 +1,205 @@
+import React, { useState } from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, ScrollView } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { useTheme } from '../../theme'
+import { renderIcon } from '../../utils/icons'
+import { usePressScale } from '../../utils/usePressScale'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+import { PRESS_SCALE } from '../../utils/animations'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
+
+export interface SelectableGridItem<T extends string | number = string> {
+  /** Unique value emitted on selection. */
+  value: T
+  /** Label rendered under the icon. */
+  label?: string
+  /** Icon name resolved via the icon registry. */
+  iconName?: string
+  /** Custom icon node — overrides `iconName`. */
+  icon?: React.ReactNode
+  disabled?: boolean
+}
+
+export interface SelectableGridProps<T extends string | number = string> {
+  items: SelectableGridItem<T>[]
+  /** Selected value(s). Array when `multiple`. */
+  value: T | T[] | null
+  onChange: (value: T) => void
+  /** Allow multiple selections. `value` should be an array. Defaults to false. */
+  multiple?: boolean
+  /** Columns per row. Defaults to 4. Ignored when `orientation='horizontal'`. */
+  numColumns?: number
+  /** Gap between cells (dp). Defaults to 12. */
+  gap?: number
+  /** Layout orientation. 'grid' (default) wraps into rows. 'horizontal' creates a single scrollable row. */
+  orientation?: 'grid' | 'horizontal'
+  style?: ViewStyle
+}
+
+function isSelected<T extends string | number>(value: T | T[] | null, candidate: T): boolean {
+  if (value == null) return false
+  return Array.isArray(value) ? value.includes(candidate) : value === candidate
+}
+
+interface CellProps<T extends string | number> {
+  item: SelectableGridItem<T>
+  selected: boolean
+  width: number
+  onPress: () => void
+}
+
+function Cell<T extends string | number>({ item, selected, width, onPress }: CellProps<T>) {
+  const { colors } = useTheme()
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.chip,
+    disabled: item.disabled,
+  })
+
+  const iconColor = selected ? colors.primary : colors.foregroundSubtle
+  const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), iconColor) : null)
+
+  return (
+    <Animated.View style={[{ width }, animatedStyle]}>
+      <TouchableOpacity
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        disabled={item.disabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityState={{ selected, disabled: item.disabled }}
+        accessibilityLabel={item.label ?? String(item.value)}
+        {...hoverHandlers}
+        style={[
+          styles.cell,
+          {
+            backgroundColor: selected ? colors.primary + '14' : colors.surface,
+            borderColor: selected ? colors.primary : 'transparent',
+          },
+          item.disabled && styles.cellDisabled,
+        ]}
+      >
+        {iconNode}
+        {item.label ? (
+          <Text
+            style={[styles.label, { color: selected ? colors.primary : colors.foreground }]}
+            numberOfLines={1}
+            allowFontScaling={true}
+          >
+            {item.label}
+          </Text>
+        ) : null}
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+/**
+ * Grid of selectable cells (icon + label) — for store / category / emoji pickers
+ * where a list would be the wrong shape. Single or multi select.
+ *
+ * @example
+ * <SelectableGrid
+ *   items={categories}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   numColumns={4}
+ * />
+ */
+export function SelectableGrid<T extends string | number = string>({
+  items,
+  value,
+  onChange,
+  multiple = false,
+  numColumns = 4,
+  gap = 12,
+  orientation = 'grid',
+  style,
+}: SelectableGridProps<T>) {
+  const [containerWidth, setContainerWidth] = useState(0)
+  const gapPx = s(gap)
+  // Compute exact cell width so `numColumns` always fits — percentage widths + gap
+  // overflow and wrap one short. -0.5 guards against sub-pixel rounding overflow.
+  const cellWidth = containerWidth > 0 ? (containerWidth - gapPx * (numColumns - 1)) / numColumns - 0.5 : 0
+  // Horizontal mode: fixed 72dp cell width (same scale as grid cells)
+  const horizCellWidth = s(72)
+
+  const handlePress = (item: SelectableGridItem<T>) => {
+    if (item.disabled) return
+    hapticSelection()
+    onChange(item.value)
+  }
+
+  if (orientation === 'horizontal') {
+    return (
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[styles.horizontal, { gap: gapPx }, style]}
+        accessibilityRole={multiple ? undefined : 'radiogroup'}
+      >
+        {items.map((item) => (
+          <Cell
+            key={String(item.value)}
+            item={item}
+            selected={isSelected(value, item.value)}
+            width={horizCellWidth}
+            onPress={() => handlePress(item)}
+          />
+        ))}
+      </ScrollView>
+    )
+  }
+
+  return (
+    <View
+      style={[styles.grid, { gap: gapPx }, style]}
+      onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+      accessibilityRole={multiple ? undefined : 'radiogroup'}
+    >
+      {cellWidth > 0
+        ? items.map((item) => (
+            <Cell
+              key={String(item.value)}
+              item={item}
+              selected={isSelected(value, item.value)}
+              width={cellWidth}
+              onPress={() => handlePress(item)}
+            />
+          ))
+        : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  horizontal: {
+    flexDirection: 'row',
+    paddingHorizontal: s(4),
+  },
+  cell: {
+    flex: 1,
+    borderRadius: RADIUS.md,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: vs(4),
+    paddingHorizontal: s(12),
+    paddingVertical: vs(12),
+  },
+  cellDisabled: {
+    opacity: 0.4,
+  },
+  label: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(12),
+    lineHeight: mvs(15),
+    textAlign: 'center',
+  },
+})

package/src/components/SelectableGrid/index.ts

@@ -0,0 +1 @@
+export * from './SelectableGrid'

package/src/components/Separator/Separator.tsx

@@ -14,7 +14,7 @@ export function Separator({ orientation = 'horizontal', style }: SeparatorProps)
     <View
       style={[
         orientation === 'horizontal' ? styles.horizontal : styles.vertical,
-        { backgroundColor: colors.border },
+        { backgroundColor: colors.separator },
         style,
       ]}
     />
@@ -25,11 +25,9 @@ const styles = StyleSheet.create({
   horizontal: {
     height: 1,
     width: '100%',
-    opacity: 0.7,
   },
   vertical: {
     width: 1,
     height: '100%',
-    opacity: 0.7,
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions, Platform } from 'react-native'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions, Platform, Modal, ScrollView, useWindowDimensions, Pressable } from 'react-native'
 import {
   BottomSheetModal,
   BottomSheetView,
@@ -16,6 +16,7 @@ import { AntDesign } from '@expo/vector-icons'
 import { impactMedium } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { BREAKPOINTS, RADIUS, SHADOWS } from '../../tokens'
 
 const SCREEN_HEIGHT = Dimensions.get('window').height
 const DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85
@@ -25,6 +26,21 @@ export { BottomSheetModalProvider }
 // Re-export BottomSheetTextInput as SheetTextInput for consumer convenience
 export { BottomSheetTextInput as SheetTextInput }
 
+export interface SheetHeaderProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface SheetContentProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface SheetFooterProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
 export interface SheetProps {
   open: boolean
   onClose: () => void
@@ -78,6 +94,35 @@ export interface SheetProps {
    * When omitted, sheet uses dynamic sizing (auto-fits content).
    */
   snapPoints?: (string | number)[]
+  /**
+   * When true, render as a centered modal dialog on wide screens (width ≥
+   * `BREAKPOINTS.wide`) instead of a bottom sheet. On narrow screens it stays a
+   * bottom sheet. Use for store/category/picker dialogs that should feel native
+   * on tablets and web.
+   *
+   * Note: the centered-dialog path uses a plain RN `Modal`, so `SheetTextInput`
+   * is not required there — use a regular `TextInput`.
+   */
+  responsive?: boolean
+  /** Max width of the centered dialog (dp). Only applies when `responsive`. Defaults to 480. */
+  dialogMaxWidth?: number
+}
+
+export function SheetHeader({ children, style }: SheetHeaderProps) {
+  return <View style={[styles.header, style]}>{children}</View>
+}
+
+export function SheetContent({ children, style }: SheetContentProps) {
+  return <View style={[styles.sheetContent, style]}>{children}</View>
+}
+
+export function SheetFooter({ children, style }: SheetFooterProps) {
+  const { colors } = useTheme()
+  return (
+    <View style={[styles.sheetFooter, { backgroundColor: colors.card, borderTopColor: colors.border }, style]}>
+      {children}
+    </View>
+  )
 }
 
 export function Sheet({
@@ -98,10 +143,14 @@ export function Sheet({
   android_keyboardInputMode = 'adjustPan',
   footer,
   snapPoints,
+  responsive = false,
+  dialogMaxWidth = 480,
 }: SheetProps) {
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
+  const { width: windowWidth } = useWindowDimensions()
   const ref = useRef<BottomSheetModal>(null)
+  const asDialog = responsive && windowWidth >= BREAKPOINTS.wide
   
   // 'interactive' + 'adjustPan' works properly with enableDynamicSizing on both platforms
   // 'fillParent' + 'adjustResize' causes restore issues (transparent gap when keyboard dismisses)
@@ -125,20 +174,25 @@ export function Sheet({
     />
   ), [])
 
-  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
-    if (!footer) return null
-    return (
-      <BottomSheetFooter {...props}>
-        {footer}
-      </BottomSheetFooter>
-    )
-  }, [footer])
+  // Detect compound components in children
+  const childArray = React.Children.toArray(children)
+  const customHeader = childArray.find((child) => React.isValidElement(child) && child.type === SheetHeader)
+  const customContent = childArray.find((child) => React.isValidElement(child) && child.type === SheetContent)
+  const customFooter = childArray.find((child) => React.isValidElement(child) && child.type === SheetFooter)
+  
+  // If using compound components, filter them out from main children
+  const filteredChildren = customHeader || customContent || customFooter
+    ? childArray.filter(
+        (child) =>
+          !React.isValidElement(child) ||
+          (child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter)
+      )
+    : children
 
   const effectiveSubtitle = subtitle ?? description
+  const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader
 
-  const showHeader = !!(title || effectiveSubtitle || showCloseButton)
-
-  const headerNode = showHeader ? (
+  const headerNode = customHeader ? customHeader : (showHeader ? (
     <View style={styles.header} accessibilityRole="header">
       <View style={styles.headerRow}>
         {title ? (
@@ -166,7 +220,48 @@ export function Sheet({
         </Text>
       ) : null}
     </View>
-  ) : null
+  ) : null)
+
+  const contentNode = customContent ? customContent : filteredChildren
+  const effectiveFooter = customFooter ? customFooter : footer
+
+  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
+    if (!effectiveFooter) return null
+    return (
+      <BottomSheetFooter {...props}>
+        {effectiveFooter}
+      </BottomSheetFooter>
+    )
+  }, [effectiveFooter])
+
+  // Centered dialog path for wide screens — plain RN Modal, same header/content/footer.
+  if (asDialog) {
+    return (
+      <Modal visible={open} transparent animationType="fade" onRequestClose={onClose}>
+        <Pressable style={styles.dialogBackdrop} onPress={onClose} accessibilityRole="button" accessibilityLabel="Close">
+          {/* Inner Pressable swallows presses so taps inside the card don't close it. */}
+          <Pressable
+            style={[
+              styles.dialogCard,
+              { backgroundColor: colors.card, maxWidth: dialogMaxWidth, maxHeight: SCREEN_HEIGHT * 0.85 },
+            ]}
+            onPress={() => {}}
+          >
+            {headerNode}
+            <ScrollView
+              contentContainerStyle={[styles.dialogContent, style]}
+              style={contentStyle}
+              showsVerticalScrollIndicator={true}
+              bounces={false}
+            >
+              {contentNode}
+            </ScrollView>
+            {effectiveFooter}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    )
+  }
 
   const useScroll = scrollable || !!maxHeight
   const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT
@@ -182,7 +277,7 @@ export function Sheet({
       maxDynamicContentSize={useDynamicSizing ? effectiveMaxHeight : undefined}
       onDismiss={onClose}
       backdropComponent={renderBackdrop}
-      footerComponent={footer ? renderFooter : undefined}
+      footerComponent={effectiveFooter ? renderFooter : undefined}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
       handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
       enablePanDownToClose
@@ -204,18 +299,22 @@ export function Sheet({
           persistentScrollbar={isAndroid}
         >
           {headerNode}
-          {children}
+          {contentNode}
         </BottomSheetScrollView>
       ) : (
         <BottomSheetView style={[styles.content, contentStyle, style]}>
           {headerNode}
-          {children}
+          {contentNode}
         </BottomSheetView>
       )}
     </BottomSheetModal>
   )
 }
 
+Sheet.Header = SheetHeader
+Sheet.Content = SheetContent
+Sheet.Footer = SheetFooter
+
 const styles = StyleSheet.create({
   background: {
     borderTopLeftRadius: ms(16),
@@ -238,12 +337,12 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   title: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(18),
     flex: 1,
   },
   subtitle: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },
@@ -260,4 +359,33 @@ const styles = StyleSheet.create({
     paddingBottom: vs(32),
     paddingRight: s(16),
   },
+  sheetContent: {
+    gap: vs(16),
+  },
+  sheetFooter: {
+    paddingHorizontal: s(16),
+    paddingVertical: vs(16),
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    gap: s(12),
+  },
+  dialogBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: s(24),
+  },
+  dialogCard: {
+    width: '100%',
+    borderRadius: RADIUS.lg,
+    paddingTop: vs(16),
+    overflow: 'hidden',
+    ...SHADOWS.xl,
+  },
+  dialogContent: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(16),
+  },
 })
+

package/src/components/Skeleton/Skeleton.tsx

@@ -9,8 +9,9 @@ import Animated, {
 } from 'react-native-reanimated'
 import { LinearGradient } from 'expo-linear-gradient'
 import { useTheme } from '../../theme'
-import { s } from '../../utils/scaling'
+import { s, vs } from '../../utils/scaling'
 import { TIMINGS } from '../../utils/animations'
+import { RADIUS } from '../../tokens'
 
 // circle: circular avatar placeholder  text: short line preset  base: custom dimensions
 export type SkeletonPreset = 'base' | 'circle' | 'text'
@@ -74,7 +75,7 @@ export function Skeleton({
     <View
       style={[
         styles.base,
-        { width: resolvedWidth as any, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
+        { width: resolvedWidth as number | `${number}%`, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
         style,
       ]}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
@@ -94,8 +95,148 @@ export function Skeleton({
   )
 }
 
+// ─── Per-component skeletons ───────────────────────────────────────────────────
+// Loading placeholders that mirror a component's footprint, so grids/lists don't
+// reflow when real data arrives.
+
+const aspectRatioMap = {
+  '1:1': 1,
+  '4:3': 3 / 4,
+  '16:9': 9 / 16,
+  '4:5': 5 / 4,
+  '3:2': 2 / 3,
+} as const
+
+export type MediaCardSkeletonAspectRatio = keyof typeof aspectRatioMap
+
+export interface MediaCardSkeletonProps {
+  /** Image aspect ratio — match your `MediaCard`. Defaults to `'4:3'`. */
+  aspectRatio?: MediaCardSkeletonAspectRatio
+  /** Show the subtitle/caption line below the title. Defaults to true. */
+  showSubtitle?: boolean
+  style?: ViewStyle
+}
+
+/** Loading placeholder matching `<MediaCard>` — image block + title/subtitle lines. */
+export function MediaCardSkeleton({ aspectRatio = '4:3', showSubtitle = true, style }: MediaCardSkeletonProps) {
+  const ratio = aspectRatioMap[aspectRatio]
+  return (
+    <View style={style}>
+      <View style={{ paddingTop: `${ratio * 100}%` as `${number}%` }}>
+        <View style={StyleSheet.absoluteFill}>
+          <Skeleton width="100%" height={undefined as unknown as number} style={skeletonStyles.fill} borderRadius={RADIUS.md} />
+        </View>
+      </View>
+      <View style={skeletonStyles.meta}>
+        <Skeleton width="70%" height={vs(14)} borderRadius={RADIUS.xs} />
+        {showSubtitle ? <Skeleton width="45%" height={vs(12)} borderRadius={RADIUS.xs} /> : null}
+      </View>
+    </View>
+  )
+}
+
+export interface ListItemSkeletonProps {
+  /** Render a circular leading avatar placeholder. Defaults to true. */
+  showAvatar?: boolean
+  /** Render a secondary subtitle line. Defaults to true. */
+  showSubtitle?: boolean
+  style?: ViewStyle
+}
+
+/** Loading placeholder matching `<ListItem>` — leading circle + title/subtitle lines. */
+export function ListItemSkeleton({ showAvatar = true, showSubtitle = true, style }: ListItemSkeletonProps) {
+  return (
+    <View style={[skeletonStyles.row, style]}>
+      {showAvatar ? <Skeleton preset="circle" diameter={40} /> : null}
+      <View style={skeletonStyles.rowText}>
+        <Skeleton width="60%" height={vs(14)} borderRadius={RADIUS.xs} />
+        {showSubtitle ? <Skeleton width="40%" height={vs(12)} borderRadius={RADIUS.xs} /> : null}
+      </View>
+    </View>
+  )
+}
+
+export interface ListSkeletonProps {
+  /** Number of placeholder rows/cells. Defaults to 6. */
+  count?: number
+  /** 1 = stacked list of `ListItemSkeleton`; >1 = grid of `MediaCardSkeleton`. Defaults to 1. */
+  columns?: number
+  /** Gap between items (dp). Defaults to 12. */
+  gap?: number
+  /** Grid only — aspect ratio of each `MediaCardSkeleton`. Defaults to `'4:3'`. */
+  aspectRatio?: MediaCardSkeletonAspectRatio
+  /** List only — show the leading avatar circle. Defaults to true. */
+  showAvatar?: boolean
+  style?: ViewStyle
+}
+
+/**
+ * Repeated loading placeholder for a `VirtualList` / list / grid. `columns={1}`
+ * renders stacked `ListItemSkeleton`s; `columns>1` renders a wrapping grid of
+ * `MediaCardSkeleton`s. Render this as the list's content while `data` is empty.
+ */
+export function ListSkeleton({
+  count = 6,
+  columns = 1,
+  gap = 12,
+  aspectRatio = '4:3',
+  showAvatar = true,
+  style,
+}: ListSkeletonProps) {
+  if (columns <= 1) {
+    return (
+      <View style={[{ gap: vs(gap) }, style]}>
+        {Array.from({ length: count }).map((_, i) => (
+          <ListItemSkeleton key={i} showAvatar={showAvatar} />
+        ))}
+      </View>
+    )
+  }
+  const widthPct = `${100 / columns}%` as `${number}%`
+  // Gutter via per-cell padding + marginBottom (not container `gap`) so percentage
+  // widths sum to exactly 100% and never wrap one short.
+  return (
+    <View style={[skeletonStyles.grid, { marginHorizontal: -s(gap) / 2 }, style]}>
+      {Array.from({ length: count }).map((_, i) => (
+        <View key={i} style={{ width: widthPct, paddingHorizontal: s(gap) / 2, marginBottom: vs(gap) }}>
+          <MediaCardSkeleton aspectRatio={aspectRatio} />
+        </View>
+      ))}
+    </View>
+  )
+}
+
+Skeleton.MediaCard = MediaCardSkeleton
+Skeleton.ListItem = ListItemSkeleton
+Skeleton.List = ListSkeleton
+
 const styles = StyleSheet.create({
   base: {
     overflow: 'hidden',
   },
 })
+
+const skeletonStyles = StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  fill: {
+    width: '100%',
+    height: '100%',
+  },
+  meta: {
+    paddingTop: vs(8),
+    gap: vs(6),
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(12),
+    paddingVertical: vs(8),
+  },
+  rowText: {
+    flex: 1,
+    gap: vs(6),
+  },
+})