@retray-dev/ui-kit 9.1.0 → 9.3.0

package/src/components/ListItem/ListItem.tsx

@@ -5,6 +5,8 @@ import {
   StyleSheet,
   ViewStyle,
   TextStyle,
+  Image,
+  ImageSourcePropType,
 } from 'react-native'
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
@@ -17,6 +19,11 @@ import { PressableRow } from '../../utils/pressable'
 export type ListItemVariant = 'plain' | 'card'
 
 export interface ListItemProps {
+  /**
+   * Image source for the left slot. If provided, renders an Image (40×40, borderRadius 8).
+   * Takes precedence over `leftRender` and `leftIcon`.
+   */
+  imageSource?: ImageSourcePropType
   /**
    * Arbitrary content rendered on the left (avatar, icon, image, etc.).
    * Rendered inside a 44×44 aligned container.
@@ -72,6 +79,8 @@ export interface ListItemProps {
   titleStyle?: TextStyle
   /** Style applied to the subtitle Text. */
   subtitleStyle?: TextStyle
+  /** Max lines for the subtitle. Defaults to 2. */
+  subtitleNumberOfLines?: number
   /** Style applied to the caption Text. */
   captionStyle?: TextStyle
   /** Accessibility label override. Defaults to the title. */
@@ -79,6 +88,7 @@ export interface ListItemProps {
 }
 
 function ListItemBase({
+  imageSource,
   leftRender,
   rightRender,
   trailing,
@@ -98,6 +108,7 @@ function ListItemBase({
   style,
   titleStyle,
   subtitleStyle,
+  subtitleNumberOfLines = 2,
   captionStyle,
   accessibilityLabel,
 }: ListItemProps) {
@@ -108,9 +119,12 @@ function ListItemBase({
     onPress?.()
   }
 
-  const effectiveLeft: React.ReactNode = leftIcon
-    ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground)
-    : leftRender ?? icon
+  // imageSource takes precedence, then leftIcon, then leftRender/icon
+  const effectiveLeft: React.ReactNode = imageSource
+    ? <Image source={imageSource} style={styles.image} />
+    : leftIcon
+      ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground)
+      : leftRender ?? icon
 
   const effectiveRight: React.ReactNode | string | undefined = rightIcon
     ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)
@@ -150,7 +164,7 @@ function ListItemBase({
         {subtitle ? (
           <Text
             style={[styles.subtitle, { color: colors.foregroundMuted }, subtitleStyle]}
-            numberOfLines={2}
+            numberOfLines={subtitleNumberOfLines}
             allowFontScaling={true}
           >
             {subtitle}
@@ -238,6 +252,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexShrink: 0,
   },
+  image: {
+    width: s(40),
+    height: s(40),
+    borderRadius: 8,
+  },
   content: {
     flex: 1,
     gap: vs(4),

package/src/components/SheetSelect/SheetSelect.tsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { View, Text, ScrollView, StyleSheet, ViewStyle } from 'react-native'
+import { EaseView } from 'react-native-ease'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+import { COLOR_TRANSITION } from '../../utils/animations'
+import { PressableChip } from '../../utils/pressable'
+import { RADIUS } from '../../tokens'
+
+export interface SheetSelectOption {
+  label: string
+  value: string | number
+  iconName?: string
+  disabled?: boolean
+}
+
+export interface SheetSelectProps {
+  options: SheetSelectOption[]
+  value?: string | number | (string | number)[]
+  onValueChange?: (value: string | number | (string | number)[]) => void
+  /** Allow multiple simultaneous selections. Defaults to false (radio). */
+  multiSelect?: boolean
+  label?: string
+  error?: string
+  /** Wrap chips into multiple rows instead of a single horizontal scroll. Defaults to false. */
+  wrap?: boolean
+  style?: ViewStyle
+  accessibilityLabel?: string
+}
+
+function SheetSelectChip({
+  option,
+  selected,
+  onPress,
+}: {
+  option: SheetSelectOption
+  selected: boolean
+  onPress: () => void
+}) {
+  const { colors } = useTheme()
+
+  const handlePress = () => {
+    hapticSelection()
+    onPress()
+  }
+
+  const iconColor = selected ? colors.primaryForeground : colors.foreground
+  const resolvedIcon = option.iconName ? renderIcon(option.iconName, ms(13), iconColor) : null
+
+  return (
+    <PressableChip
+      onPress={option.disabled ? undefined : handlePress}
+      rippleColor="transparent"
+      touchSoundDisabled
+      accessibilityRole="button"
+      accessibilityLabel={option.disabled ? `${option.label}, unavailable` : option.label}
+      accessibilityState={{ selected, disabled: option.disabled }}
+    >
+      <EaseView
+        style={[styles.chip, option.disabled && styles.chipDisabled]}
+        animate={{
+          backgroundColor: selected ? colors.primary : colors.surface,
+          borderColor: selected ? colors.primary : colors.border,
+        }}
+        transition={COLOR_TRANSITION}
+      >
+        {resolvedIcon ? <View style={styles.chipIcon}>{resolvedIcon}</View> : null}
+        <Text
+          style={[styles.chipLabel, { color: selected ? colors.primaryForeground : colors.foreground }]}
+          allowFontScaling={true}
+        >
+          {option.label}
+        </Text>
+      </EaseView>
+    </PressableChip>
+  )
+}
+
+export function SheetSelect({
+  options,
+  value,
+  onValueChange,
+  multiSelect = false,
+  label,
+  error,
+  wrap = false,
+  style,
+  accessibilityLabel,
+}: SheetSelectProps) {
+  const { colors } = useTheme()
+
+  const isSelected = (optionValue: string | number): boolean => {
+    if (Array.isArray(value)) return value.includes(optionValue)
+    return optionValue === value
+  }
+
+  const handlePress = (optionValue: string | number) => {
+    if (!multiSelect) {
+      onValueChange?.(optionValue)
+      return
+    }
+    const currentArray = Array.isArray(value) ? value : value != null ? [value] : []
+    const alreadySelected = currentArray.includes(optionValue)
+    const newArray: (string | number)[] = alreadySelected
+      ? currentArray.filter((v) => v !== optionValue)
+      : [...currentArray, optionValue]
+    onValueChange?.(newArray)
+  }
+
+  const chips = options.map((opt) => (
+    <SheetSelectChip
+      key={opt.value}
+      option={opt}
+      selected={isSelected(opt.value)}
+      onPress={() => handlePress(opt.value)}
+    />
+  ))
+
+  return (
+    <View style={[styles.container, style]} accessibilityLabel={accessibilityLabel}>
+      {label ? (
+        <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>
+          {label}
+        </Text>
+      ) : null}
+      {wrap ? (
+        <View style={styles.wrapContainer}>{chips}</View>
+      ) : (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.scrollContent}
+        >
+          {chips}
+        </ScrollView>
+      )}
+      {error ? (
+        <Text style={[styles.error, { color: colors.destructive }]} allowFontScaling={true} accessibilityLiveRegion="polite">
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: vs(8),
+  },
+  label: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(14),
+  },
+  scrollContent: {
+    flexDirection: 'row',
+    gap: s(8),
+  },
+  wrapContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: s(8),
+  },
+  chip: {
+    borderRadius: RADIUS.full,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(10),
+    minHeight: 44,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: s(5),
+  },
+  chipDisabled: {
+    opacity: 0.4,
+  },
+  chipIcon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  chipLabel: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+  },
+  error: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+  },
+})

package/src/components/SheetSelect/index.ts

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

package/src/fonts.ts

@@ -14,38 +14,39 @@
  * }
  */
 // `.otf` assets resolve to a Metro asset module id (number) via require() at the
-// consumer's build time. Declared locally so the dts build does not depend on @types/node.
+// consumer's build time. Paths are relative to dist/fonts.js (the compiled output).
+// Both dist/ and src/ are published in the package, so ../src/assets/fonts/ resolves correctly.
 declare const require: (path: string) => number
 
 export const SohneFonts = {
   // Sohne base
-  'Sohne-ExtraLight':         require('./assets/fonts/Sohne-ExtraLight.otf'),
-  'Sohne-ExtraLightItalic':   require('./assets/fonts/Sohne-ExtraLightItalic.otf'),
-  'Sohne-Light':              require('./assets/fonts/Sohne-Light.otf'),
-  'Sohne-LightItalic':        require('./assets/fonts/Sohne-LightItalic.otf'),
-  'Sohne-Regular':            require('./assets/fonts/Sohne-Regular.otf'),
-  'Sohne-Italic':             require('./assets/fonts/Sohne-Italic.otf'),
-  'Sohne-Medium':             require('./assets/fonts/Sohne-Medium.otf'),
-  'Sohne-MediumItalic':       require('./assets/fonts/Sohne-MediumItalic.otf'),
-  'Sohne-SemiBold':           require('./assets/fonts/Sohne-SemiBold.otf'),
-  'Sohne-SemiBoldItalic':     require('./assets/fonts/Sohne-SemiBoldItalic.otf'),
-  'Sohne-Bold':               require('./assets/fonts/Sohne-Bold.otf'),
-  'Sohne-BoldItalic':         require('./assets/fonts/Sohne-BoldItalic.otf'),
-  'Sohne-ExtraBold':          require('./assets/fonts/Sohne-ExtraBold.otf'),
-  'Sohne-ExtraBoldItalic':    require('./assets/fonts/Sohne-ExtraBoldItalic.otf'),
+  'Sohne-ExtraLight':         require('../src/assets/fonts/Sohne-ExtraLight.otf'),
+  'Sohne-ExtraLightItalic':   require('../src/assets/fonts/Sohne-ExtraLightItalic.otf'),
+  'Sohne-Light':              require('../src/assets/fonts/Sohne-Light.otf'),
+  'Sohne-LightItalic':        require('../src/assets/fonts/Sohne-LightItalic.otf'),
+  'Sohne-Regular':            require('../src/assets/fonts/Sohne-Regular.otf'),
+  'Sohne-Italic':             require('../src/assets/fonts/Sohne-Italic.otf'),
+  'Sohne-Medium':             require('../src/assets/fonts/Sohne-Medium.otf'),
+  'Sohne-MediumItalic':       require('../src/assets/fonts/Sohne-MediumItalic.otf'),
+  'Sohne-SemiBold':           require('../src/assets/fonts/Sohne-SemiBold.otf'),
+  'Sohne-SemiBoldItalic':     require('../src/assets/fonts/Sohne-SemiBoldItalic.otf'),
+  'Sohne-Bold':               require('../src/assets/fonts/Sohne-Bold.otf'),
+  'Sohne-BoldItalic':         require('../src/assets/fonts/Sohne-BoldItalic.otf'),
+  'Sohne-ExtraBold':          require('../src/assets/fonts/Sohne-ExtraBold.otf'),
+  'Sohne-ExtraBoldItalic':    require('../src/assets/fonts/Sohne-ExtraBoldItalic.otf'),
   // SohneMono
-  'SohneMono-ExtraLight':         require('./assets/fonts/SohneMono-ExtraLight.otf'),
-  'SohneMono-ExtraLightItalic':   require('./assets/fonts/SohneMono-ExtraLightItalic.otf'),
-  'SohneMono-Light':              require('./assets/fonts/SohneMono-Light.otf'),
-  'SohneMono-LightItalic':        require('./assets/fonts/SohneMono-LightItalic.otf'),
-  'SohneMono-Regular':            require('./assets/fonts/SohneMono-Regular.otf'),
-  'SohneMono-Italic':             require('./assets/fonts/SohneMono-Italic.otf'),
-  'SohneMono-Medium':             require('./assets/fonts/SohneMono-Medium.otf'),
-  'SohneMono-MediumItalic':       require('./assets/fonts/SohneMono-MediumItalic.otf'),
-  'SohneMono-SemiBold':           require('./assets/fonts/SohneMono-SemiBold.otf'),
-  'SohneMono-SemiBoldItalic':     require('./assets/fonts/SohneMono-SemiBoldItalic.otf'),
-  'SohneMono-Bold':               require('./assets/fonts/SohneMono-Bold.otf'),
-  'SohneMono-BoldItalic':         require('./assets/fonts/SohneMono-BoldItalic.otf'),
-  'SohneMono-ExtraBold':          require('./assets/fonts/SohneMono-ExtraBold.otf'),
-  'SohneMono-ExtraBoldItalic':    require('./assets/fonts/SohneMono-ExtraBoldItalic.otf'),
+  'SohneMono-ExtraLight':         require('../src/assets/fonts/SohneMono-ExtraLight.otf'),
+  'SohneMono-ExtraLightItalic':   require('../src/assets/fonts/SohneMono-ExtraLightItalic.otf'),
+  'SohneMono-Light':              require('../src/assets/fonts/SohneMono-Light.otf'),
+  'SohneMono-LightItalic':        require('../src/assets/fonts/SohneMono-LightItalic.otf'),
+  'SohneMono-Regular':            require('../src/assets/fonts/SohneMono-Regular.otf'),
+  'SohneMono-Italic':             require('../src/assets/fonts/SohneMono-Italic.otf'),
+  'SohneMono-Medium':             require('../src/assets/fonts/SohneMono-Medium.otf'),
+  'SohneMono-MediumItalic':       require('../src/assets/fonts/SohneMono-MediumItalic.otf'),
+  'SohneMono-SemiBold':           require('../src/assets/fonts/SohneMono-SemiBold.otf'),
+  'SohneMono-SemiBoldItalic':     require('../src/assets/fonts/SohneMono-SemiBoldItalic.otf'),
+  'SohneMono-Bold':               require('../src/assets/fonts/SohneMono-Bold.otf'),
+  'SohneMono-BoldItalic':         require('../src/assets/fonts/SohneMono-BoldItalic.otf'),
+  'SohneMono-ExtraBold':          require('../src/assets/fonts/SohneMono-ExtraBold.otf'),
+  'SohneMono-ExtraBoldItalic':    require('../src/assets/fonts/SohneMono-ExtraBoldItalic.otf'),
 } as const

package/src/hooks/useConfirmDialog.ts

@@ -0,0 +1,67 @@
+import { useState, useCallback } from 'react'
+
+export interface UseConfirmDialogOptions {
+  onConfirm: () => void | Promise<void>
+  onCancel?: () => void
+}
+
+export interface UseConfirmDialogResult<T> {
+  /** Pass to ConfirmDialog `visible` prop. */
+  visible: boolean
+  /** The value passed to `open()` — available during the confirmation flow. */
+  target: T | null
+  /** Whether `onConfirm` is currently executing. Pass to ConfirmDialog `loading` prop. */
+  loading: boolean
+  /** Open the dialog, optionally with an associated value (e.g. the item to delete). */
+  open: (target?: T) => void
+  /** Handlers to pass directly to ConfirmDialog. */
+  dialogProps: {
+    visible: boolean
+    loading: boolean
+    onConfirm: () => void
+    onCancel: () => void
+  }
+}
+
+export function useConfirmDialog<T = undefined>(
+  options: UseConfirmDialogOptions,
+): UseConfirmDialogResult<T> {
+  const [visible, setVisible] = useState(false)
+  const [target, setTarget] = useState<T | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const open = useCallback((t?: T) => {
+    setTarget(t ?? null)
+    setVisible(true)
+  }, [])
+
+  const handleConfirm = useCallback(async () => {
+    setLoading(true)
+    try {
+      await options.onConfirm()
+    } finally {
+      setLoading(false)
+      setVisible(false)
+      setTarget(null)
+    }
+  }, [options])
+
+  const handleCancel = useCallback(() => {
+    setVisible(false)
+    setTarget(null)
+    options.onCancel?.()
+  }, [options])
+
+  return {
+    visible,
+    target,
+    loading,
+    open,
+    dialogProps: {
+      visible,
+      loading,
+      onConfirm: handleConfirm,
+      onCancel: handleCancel,
+    },
+  }
+}

package/src/index.ts

@@ -53,6 +53,8 @@ export * from './components/SelectableGrid'
 export * from './components/PricingCard'
 export * from './components/TabBar'
 export * from './components/ImageViewer'
+export * from './components/SheetSelect'
+export * from './components/ImageUpload'
 // 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'.
@@ -76,6 +78,10 @@ export {
   richHaptics,
 } from './utils/haptics'
 
+// Hooks
+export { useConfirmDialog } from './hooks/useConfirmDialog'
+export type { UseConfirmDialogOptions, UseConfirmDialogResult } from './hooks/useConfirmDialog'
+
 // Design tokens
 export {
   SPACING,

package/dist/chunk-26BCI223.mjs

@@ -1,14 +0,0 @@
-import { TIMINGS, EASINGS } from './chunk-DVK4G2GT.mjs';
-import { useEffect } from 'react';
-import { useSharedValue, withTiming } from 'react-native-reanimated';
-
-function useColorTransition(active, options = {}) {
-  const { duration = TIMINGS.state.duration } = options;
-  const progress = useSharedValue(active ? 1 : 0);
-  useEffect(() => {
-    progress.value = withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard });
-  }, [active, duration, progress]);
-  return progress;
-}
-
-export { useColorTransition };