@retray-dev/ui-kit 7.0.1 → 9.0.0

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/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
@@ -93,6 +94,18 @@ 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) {
@@ -130,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)
@@ -217,6 +234,35 @@ export function Sheet({
     )
   }, [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
   
@@ -323,5 +369,23 @@ const styles = StyleSheet.create({
     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'
@@ -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),
+  },
+})

package/src/components/Spinner/Spinner.tsx

@@ -25,10 +25,16 @@ const labelFontSize: Record<SpinnerSize, number> = {
 
 export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
   const { colors } = useTheme()
+  const a11yLabel = label || 'Loading'
 
   if (label) {
     return (
-      <View style={styles.wrapper}>
+      <View
+        style={styles.wrapper}
+        accessibilityRole="progressbar"
+        accessibilityLabel={a11yLabel}
+        accessibilityState={{ busy: true }}
+      >
         <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
         <Text
           style={[styles.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }]}
@@ -40,7 +46,16 @@ export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
     )
   }
 
-  return <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
+  return (
+    <ActivityIndicator
+      size={sizeMap[size]}
+      color={color ?? colors.primary}
+      accessibilityRole="progressbar"
+      accessibilityLabel={a11yLabel}
+      accessibilityState={{ busy: true }}
+      {...props}
+    />
+  )
 }
 
 const styles = StyleSheet.create({

package/src/components/Switch/Switch.tsx

@@ -1,17 +1,11 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { TouchableOpacity, StyleSheet, ViewStyle, View } from 'react-native'
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withSpring,
-  withTiming,
-  interpolateColor,
-} from 'react-native-reanimated'
+import { EaseView } from 'react-native-ease'
 import { Feather } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s } from '../../utils/scaling'
-import { SPRINGS, TIMINGS, EASINGS } from '../../utils/animations'
+import { COLOR_TRANSITION, OPACITY_TRANSITION, SPRING_ELASTIC } from '../../utils/animations'
 
 const TRACK_WIDTH  = s(52)
 const TRACK_HEIGHT = s(30)
@@ -31,45 +25,6 @@ export interface SwitchProps {
 export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
   const { colors } = useTheme()
 
-  const progress = useSharedValue(checked ? 1 : 0)
-
-  useEffect(() => {
-    progress.value = withSpring(checked ? 1 : 0, SPRINGS.elastic)
-  }, [checked, progress])
-
-  const thumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: progress.value * THUMB_TRAVEL }],
-  }))
-
-  const trackStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(
-      progress.value,
-      [0, 1],
-      [colors.surfaceStrong, colors.primary],
-    ),
-  }))
-
-  // AUDIT FIX: the off-state track used surfaceStrong (~#ebebeb in light mode)
-  // with no border — nearly invisible on white page/card surfaces. A 1.5px border
-  // that fades out as the track fills gives the off state clear visual definition
-  // without adding visual weight to the on state.
-  const trackBorderStyle = useAnimatedStyle(() => ({
-    borderWidth: 1.5,
-    borderColor: interpolateColor(
-      progress.value,
-      [0, 1],
-      [colors.border, 'transparent'],
-    ),
-  }))
-
-  const checkIconStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
-  }))
-
-  const crossIconStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(checked ? 0 : 1, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
-  }))
-
   return (
     <View style={[{ opacity: disabled ? 0.45 : 1, alignSelf: 'flex-start' }, style]}>
       <TouchableOpacity
@@ -85,19 +40,36 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
         accessibilityState={{ checked, disabled: !!disabled }}
         style={styles.touchable}
       >
-        <Animated.View style={[styles.track, trackStyle]}>
-          <Animated.View style={[styles.trackBorder, trackBorderStyle]} pointerEvents="none" />
-          <Animated.View
-            style={[styles.thumb, { backgroundColor: colors.primaryForeground }, thumbStyle]}
+        <EaseView
+          style={styles.track}
+          animate={{ backgroundColor: checked ? colors.primary : colors.surfaceStrong }}
+          transition={COLOR_TRANSITION}
+        >
+          {/*
+            AUDIT FIX: the off-state track used surfaceStrong (~#ebebeb in light mode)
+            with no border — nearly invisible on white page/card surfaces. A 1.5px border
+            that fades out as the track fills gives the off state clear visual definition
+            without adding visual weight to the on state.
+          */}
+          <EaseView
+            style={[styles.trackBorder, { borderWidth: 1.5 }]}
+            pointerEvents="none"
+            animate={{ borderColor: checked ? 'transparent' : colors.border }}
+            transition={COLOR_TRANSITION}
+          />
+          <EaseView
+            style={[styles.thumb, { backgroundColor: colors.primaryForeground }]}
+            animate={{ translateX: checked ? THUMB_TRAVEL : 0 }}
+            transition={SPRING_ELASTIC}
           >
-            <Animated.View style={[styles.iconWrapper, checkIconStyle]}>
+            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 1 : 0 }} transition={OPACITY_TRANSITION}>
               <Feather name="check" size={ICON_SIZE} color={colors.primary} />
-            </Animated.View>
-            <Animated.View style={[styles.iconWrapper, crossIconStyle]}>
+            </EaseView>
+            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 0 : 1 }} transition={OPACITY_TRANSITION}>
               <Feather name="x" size={ICON_SIZE} color={colors.foregroundMuted} />
-            </Animated.View>
-          </Animated.View>
-        </Animated.View>
+            </EaseView>
+          </EaseView>
+        </EaseView>
       </TouchableOpacity>
     </View>
   )