@retray-dev/ui-kit 10.1.0 → 12.1.0

package/src/components/NumberStepper/NumberStepper.tsx

@@ -0,0 +1,147 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { impactLight } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+import { RADIUS } from '../../tokens'
+import { PressableButton } from '../../utils/pressable'
+
+export type NumberStepperSize = 'sm' | 'md' | 'lg'
+
+export interface NumberStepperProps {
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  size?: NumberStepperSize
+  disabled?: boolean
+  style?: ViewStyle
+  accessibilityLabel?: string
+}
+
+const sizeConfig: Record<NumberStepperSize, { button: number; icon: number; valueFontSize: number; valueLineHeight: number; valueMinWidth: number }> = {
+  sm: { button: s(40), icon: 16, valueFontSize: ms(18), valueLineHeight: mvs(24), valueMinWidth: s(32) },
+  md: { button: s(44), icon: 18, valueFontSize: ms(22), valueLineHeight: mvs(28), valueMinWidth: s(36) },
+  lg: { button: s(52), icon: 22, valueFontSize: ms(26), valueLineHeight: mvs(32), valueMinWidth: s(40) },
+}
+
+function NumberStepperBase({
+  value,
+  onValueChange,
+  min = 1,
+  max = 99,
+  step = 1,
+  size = 'md',
+  disabled = false,
+  style,
+  accessibilityLabel,
+}: NumberStepperProps) {
+  const { colors } = useTheme()
+
+  const canDecrement = value > min && !disabled
+  const canIncrement = value < max && !disabled
+
+  const handleDecrement = () => {
+    if (!canDecrement) return
+    impactLight()
+    onValueChange(Math.max(min, value - step))
+  }
+
+  const handleIncrement = () => {
+    if (!canIncrement) return
+    impactLight()
+    onValueChange(Math.min(max, value + step))
+  }
+
+  const { button: buttonSize, icon: iconSize, valueFontSize, valueLineHeight, valueMinWidth } = sizeConfig[size]
+
+  const displayValue = String(value)
+
+  return (
+    <View style={[styles.container, style]}>
+      <PressableButton
+        style={[
+          styles.button,
+          {
+            width: buttonSize,
+            height: buttonSize,
+            backgroundColor: colors.surface,
+            borderColor: colors.border,
+          },
+          !canDecrement && styles.buttonDisabled,
+        ]}
+        enabled={canDecrement}
+        onPress={handleDecrement}
+        rippleColor="transparent"
+        touchSoundDisabled
+        accessibilityRole="button"
+        accessibilityLabel={`Decrease, current value ${displayValue}`}
+        accessibilityState={{ disabled: !canDecrement }}
+      >
+        {renderIcon('minus', iconSize, canDecrement ? colors.foreground : colors.foregroundMuted)}
+      </PressableButton>
+      <Text
+        style={[
+          styles.value,
+          {
+            color: colors.foreground,
+            fontSize: valueFontSize,
+            lineHeight: valueLineHeight,
+            minWidth: valueMinWidth,
+          },
+        ]}
+        allowFontScaling={true}
+        accessibilityLabel={accessibilityLabel ?? `Quantity: ${displayValue}`}
+        accessibilityRole="text"
+      >
+        {displayValue}
+      </Text>
+      <PressableButton
+        style={[
+          styles.button,
+          {
+            width: buttonSize,
+            height: buttonSize,
+            backgroundColor: colors.surface,
+            borderColor: colors.border,
+          },
+          !canIncrement && styles.buttonDisabled,
+        ]}
+        enabled={canIncrement}
+        onPress={handleIncrement}
+        rippleColor="transparent"
+        touchSoundDisabled
+        accessibilityRole="button"
+        accessibilityLabel={`Increase, current value ${displayValue}`}
+        accessibilityState={{ disabled: !canIncrement }}
+      >
+        {renderIcon('plus', iconSize, canIncrement ? colors.foreground : colors.foregroundMuted)}
+      </PressableButton>
+    </View>
+  )
+}
+
+export const NumberStepper = React.memo(NumberStepperBase)
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(12),
+  },
+  button: {
+    borderRadius: RADIUS.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+  },
+  buttonDisabled: {
+    opacity: 0.35,
+  },
+  value: {
+    fontFamily: 'Sohne-Medium',
+    textAlign: 'center',
+  },
+})

package/src/components/NumberStepper/index.ts

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

package/src/components/Pressable/Pressable.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ViewStyle } from 'react-native'
+import { ViewStyle, type AccessibilityRole } from 'react-native'
 import { impactLight } from '../../utils/haptics'
 import { PressableCard } from '../../utils/pressable'
 import { PRESS_SCALE } from '../../utils/animations'
@@ -11,11 +11,6 @@ export interface PressableProps {
   onPress?: () => void
   /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
   pressScale?: number
-  /**
-   * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
-   * Kept for backwards compatibility with v6.x consumers.
-   */
-  bounciness?: number
   /** Enable haptic feedback on press. Defaults to `true`. */
   haptics?: boolean
   /** Additional style for the wrapper. */
@@ -24,6 +19,19 @@ export interface PressableProps {
   disabled?: boolean
   /** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
   hoverScale?: number
+  /**
+   * Accessibility role for the pressable element.
+   * Defaults to `"button"`.
+   */
+  accessibilityRole?: AccessibilityRole
+  /**
+   * Accessibility state for screen readers.
+   * Used to communicate states like `selected`, `expanded`, `checked`, etc.
+   * Defaults to `{ disabled: !!disabled }`.
+   */
+  accessibilityState?: Record<string, unknown>
+  /** Accessibility label for screen readers. */
+  accessibilityLabel?: string
 }
 
 /**
@@ -41,6 +49,9 @@ export function Pressable({
   style,
   disabled,
   hoverScale: _hoverScale = 1.02,
+  accessibilityRole,
+  accessibilityState,
+  accessibilityLabel,
 }: PressableProps) {
   const handlePress = () => {
     if (disabled || !onPress) return
@@ -56,8 +67,9 @@ export function Pressable({
       rippleColor="transparent"
       touchSoundDisabled
       activateOnHover
-      accessibilityRole="button"
-      accessibilityState={{ disabled: !!disabled }}
+      accessibilityRole={accessibilityRole ?? 'button'}
+      accessibilityState={accessibilityState ?? { disabled: !!disabled }}
+      accessibilityLabel={accessibilityLabel}
     >
       {children}
     </PressableCard>

package/src/components/Sheet/Sheet.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions, Platform, Modal, ScrollView, useWindowDimensions, Pressable } from 'react-native'
-import BottomSheet, {
+import React, { useCallback, useEffect, useRef, useId } from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import {
+  BottomSheetModal,
   BottomSheetView,
   BottomSheetScrollView,
   BottomSheetBackdrop,
@@ -15,14 +16,8 @@ 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
-const isAndroid = Platform.OS === 'android'
 
 export { BottomSheetModalProvider }
-// Re-export BottomSheetTextInput as SheetTextInput for consumer convenience
 export { BottomSheetTextInput as SheetTextInput }
 
 export interface SheetHeaderProps {
@@ -44,67 +39,25 @@ export interface SheetProps {
   open: boolean
   onClose: () => void
   title?: string
-  /** Secondary text below title. */
   subtitle?: string
-  /** @deprecated Use `subtitle` instead. */
-  description?: string
-  /** Show an X close button in the header. */
   showCloseButton?: boolean
   children?: React.ReactNode
-  /** Style for the inner content container. */
   style?: ViewStyle
-  /** Style for the content wrapper (outside the scroll container). */
   contentStyle?: ViewStyle
-  /** Render children inside BottomSheetScrollView. */
+  /** Render children inside BottomSheetScrollView instead of BottomSheetView. */
   scrollable?: boolean
-  /** Cap sheet height (dp). Children scroll when content exceeds this value. */
+  /** Cap sheet height (dp). Content scrolls when exceeding this value. Requires `scrollable`. */
   maxHeight?: number
-  /**
-   * Keyboard behavior — how the sheet responds to keyboard appearance.
-   * - 'interactive': offset sheet by keyboard size (default, works on both platforms)
-   * - 'fillParent': extend sheet to fill parent view (can cause restore issues with dynamic sizing)
-   * - 'extend': extend sheet to maximum snap point
-   * 
-   * Default: 'interactive' on both platforms.
-   */
   keyboardBehavior?: 'extend' | 'fillParent' | 'interactive'
-  /**
-   * Keyboard blur behavior — what happens when keyboard dismisses.
-   * - 'none': do nothing
-   * - 'restore': restore sheet to previous position (default)
-   */
   keyboardBlurBehavior?: 'none' | 'restore'
-  /**
-   * Blur keyboard when user starts dragging the sheet down.
-   * Default: true (recommended for better UX)
-   */
   enableBlurKeyboardOnGesture?: boolean
-  /**
-   * Android-only: defines keyboard input mode.
-   * - 'adjustPan': pan the sheet content (default, fixes restore issues with dynamic sizing)
-   * - 'adjustResize': resize the sheet container (can cause transparent gap on dismiss)
-   */
   android_keyboardInputMode?: 'adjustPan' | 'adjustResize'
-  /** Sticky footer rendered below the scroll area. */
   footer?: React.ReactNode
   /**
-   * Array of snap points for the sheet (e.g., ['50%', '85%'] or [200, 500]).
+   * Array of snap points (e.g., ['50%', '85%'] or [200, 500]).
    * When provided, disables enableDynamicSizing.
-   * 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) {
@@ -129,76 +82,73 @@ export function Sheet({
   onClose,
   title,
   subtitle,
-  description,
   showCloseButton = false,
   children,
   style,
   contentStyle,
-  scrollable,
+  scrollable = false,
   maxHeight,
-  keyboardBehavior,
+  keyboardBehavior = 'interactive',
   keyboardBlurBehavior = 'restore',
   enableBlurKeyboardOnGesture = true,
   android_keyboardInputMode = 'adjustPan',
   footer,
   snapPoints,
-  responsive = false,
-  dialogMaxWidth = 480,
 }: SheetProps) {
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
-  const { width: windowWidth } = useWindowDimensions()
-  const ref = useRef<BottomSheet>(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)
-  const effectiveKeyboardBehavior = keyboardBehavior ?? 'interactive'
+  const ref = useRef<BottomSheetModal>(null)
+  const wasOpened = useRef(false)
+  const name = useId()
 
   useEffect(() => {
     if (open) {
       impactMedium()
-      ref.current?.snapToIndex(0)
-    } else {
-      ref.current?.close()
+      ref.current?.present()
+      wasOpened.current = true
+    } else if (wasOpened.current) {
+      ref.current?.dismiss()
     }
   }, [open])
 
-  const renderBackdrop = useCallback((props: BottomSheetBackdropProps) => (
-    <BottomSheetBackdrop
-      {...props}
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      pressBehavior="close"
-    />
-  ), [])
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior="close"
+      />
+    ),
+    []
+  )
 
-  // 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 filteredChildren =
+    customHeader || customContent || customFooter
+      ? childArray.filter(
+          (child) =>
+            !React.isValidElement(child) ||
+            (child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter)
+        )
+      : children
 
-  const headerNode = customHeader ? customHeader : (showHeader ? (
+  const showHeader = !!(title || subtitle || showCloseButton) && !customHeader
+
+  const headerNode = customHeader ? customHeader : showHeader ? (
     <View style={[styles.header, { backgroundColor: colors.card }]} accessibilityRole="header">
       <View style={styles.headerRow}>
         {title ? (
           <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
             {title}
           </Text>
-        ) : <View style={{ flex: 1 }} />}
+        ) : (
+          <View style={{ flex: 1 }} />
+        )}
         {showCloseButton ? (
           <TouchableOpacity
             onPress={onClose}
@@ -213,90 +163,52 @@ export function Sheet({
           </TouchableOpacity>
         ) : null}
       </View>
-      {effectiveSubtitle ? (
+      {subtitle ? (
         <Text style={[styles.subtitle, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-          {effectiveSubtitle}
+          {subtitle}
         </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 renderFooter = useCallback(
+    (props: BottomSheetFooterProps) => {
+      if (!effectiveFooter) return null
+      return <BottomSheetFooter {...props}>{effectiveFooter}</BottomSheetFooter>
+    },
+    [effectiveFooter]
+  )
 
-  const useScroll = scrollable || !!maxHeight
-  const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT
-  
-  // If snapPoints provided, disable dynamic sizing. Otherwise use dynamic sizing.
   const useDynamicSizing = !snapPoints
-  
+
   return (
-    <BottomSheet
+      <BottomSheetModal
       ref={ref}
-      index={-1}
-      onClose={onClose}
+      name={name}
+      onDismiss={onClose}
       enableDynamicSizing={useDynamicSizing}
       snapPoints={snapPoints}
-      maxDynamicContentSize={useDynamicSizing ? effectiveMaxHeight : undefined}
+      maxDynamicContentSize={useDynamicSizing && maxHeight ? maxHeight : undefined}
       backdropComponent={renderBackdrop}
       footerComponent={effectiveFooter ? renderFooter : undefined}
-      backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
-      handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
+      backgroundStyle={{ ...styles.background, backgroundColor: colors.card }}
+      handleIndicatorStyle={{ ...styles.handle, backgroundColor: colors.border }}
       enablePanDownToClose
       topInset={insets.top}
-      keyboardBehavior={effectiveKeyboardBehavior}
+      keyboardBehavior={keyboardBehavior}
       keyboardBlurBehavior={keyboardBlurBehavior}
       android_keyboardInputMode={android_keyboardInputMode}
       enableBlurKeyboardOnGesture={enableBlurKeyboardOnGesture}
     >
-      {useScroll ? (
+      {scrollable ? (
         <BottomSheetScrollView
-          contentContainerStyle={[
-            styles.scrollContent,
-            style,
-          ]}
+          contentContainerStyle={[styles.scrollContent, style]}
           style={contentStyle}
-          showsVerticalScrollIndicator={true}
-          indicatorStyle="black"
-          persistentScrollbar={isAndroid}
+          showsVerticalScrollIndicator
+          bounces={false}
           stickyHeaderIndices={headerNode ? [0] : undefined}
         >
           {headerNode}
@@ -308,7 +220,7 @@ export function Sheet({
           {contentNode}
         </BottomSheetView>
       )}
-    </BottomSheet>
+    </BottomSheetModal>
   )
 }
 
@@ -358,7 +270,6 @@ const styles = StyleSheet.create({
   scrollContent: {
     paddingHorizontal: s(16),
     paddingBottom: vs(32),
-    paddingRight: s(16),
   },
   sheetContent: {
     gap: vs(16),
@@ -370,23 +281,4 @@ 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),
-  },
 })
-