@retray-dev/ui-kit 13.2.0 → 13.4.0

package/dist/index.mjs

@@ -1,65 +1,80 @@
-export { Toggle } from './chunk-RRKM4MKB.mjs';
-export { Stats } from './chunk-ZKDKKQCE.mjs';
-export { Switch } from './chunk-E2PONRJG.mjs';
-export { TabBar } from './chunk-U6DEBYU5.mjs';
-export { Tabs, TabsContent } from './chunk-KC5QDYGZ.mjs';
-export { Text } from './chunk-EHGBHFMH.mjs';
-export { Textarea } from './chunk-L3YKPTJQ.mjs';
-export { Select } from './chunk-IDVUZIVY.mjs';
-export { SelectableCard, SelectableCardGroup } from './chunk-BULKGOIZ.mjs';
-export { SelectableGrid } from './chunk-NPCBNGNE.mjs';
-export { Separator } from './chunk-EW2FIDSM.mjs';
-export { BottomSheetModalProvider, Sheet, SheetContent, SheetFooter, SheetHeader, BottomSheetTextInput as SheetTextInput } from './chunk-7BZJRB77.mjs';
-export { SheetSelect } from './chunk-WIPEDNSD.mjs';
-export { Skeleton } from './chunk-XCIG6HT2.mjs';
-export { Slider } from './chunk-C5ZRMR2E.mjs';
-export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-ITG4JQM3.mjs';
-export { NumberStepper } from './chunk-2QXJDRVU.mjs';
-export { Pressable } from './chunk-62BBSSUF.mjs';
-export { PricingCard } from './chunk-K3QX2M26.mjs';
-export { Progress } from './chunk-DBHSUUKU.mjs';
-export { RadioGroup } from './chunk-IJCMPVW5.mjs';
-export { RetrayProvider } from './chunk-ERWJPVX7.mjs';
-export { ToastProvider, sonnerToast as toast, useToast } from './chunk-SZEKQAOY.mjs';
-export { ImageViewer } from './chunk-PGQ6FMXS.mjs';
-export { PagerDots } from './chunk-S44XWTTC.mjs';
-export { LabelValue } from './chunk-DE25XTVQ.mjs';
-export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-OBV72JD4.mjs';
-export { ListItem } from './chunk-CZN6L2QU.mjs';
-export { MediaCard } from './chunk-CM2DG4MR.mjs';
-export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-S2VGME7X.mjs';
-export { MenuItem } from './chunk-COA2YZOX.mjs';
-export { DetailRow } from './chunk-KAGADD2O.mjs';
-export { EmptyState } from './chunk-FTTI6T5Q.mjs';
-export { ErrorBoundary } from './chunk-ESQDPO5E.mjs';
-export { Form, FormField, FormFooter, FormSection } from './chunk-KPTY7UYQ.mjs';
-export { IconPicker } from './chunk-NGEN2EES.mjs';
-export { ImageUpload } from './chunk-HHOOFDBA.mjs';
-export { Spinner } from './chunk-2VIDP72N.mjs';
+export { Toggle } from './chunk-HLWGFBIF.mjs';
+export { VirtualizedList } from './chunk-WFNGSYS4.mjs';
+export { Slider } from './chunk-4PF4LKNT.mjs';
+export { Stats } from './chunk-YOXSXHDE.mjs';
+export { Switch } from './chunk-5TNQ573V.mjs';
+export { TabBar } from './chunk-IFGZUJFH.mjs';
+export { Tabs, TabsContent } from './chunk-BMAAAJWN.mjs';
+export { Text } from './chunk-CYGYC7XT.mjs';
+export { Textarea } from './chunk-7CE6PDCQ.mjs';
+export { ScreenContainer } from './chunk-WR6DCNAE.mjs';
+export { Select } from './chunk-RLPPRIJ7.mjs';
+export { SelectableCard, SelectableCardGroup } from './chunk-FE26TPCI.mjs';
+export { SelectableGrid } from './chunk-T4KMKHTI.mjs';
+export { Separator } from './chunk-BVJAYPAD.mjs';
+export { BottomSheetModalProvider, Sheet, SheetContent, SheetFooter, SheetHeader, BottomSheetTextInput as SheetTextInput } from './chunk-UBTP4NPP.mjs';
+export { SheetSelect } from './chunk-WD5LBXPR.mjs';
+export { Skeleton } from './chunk-S433IOQE.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-QEE3EQ3N.mjs';
+export { NumberStepper } from './chunk-NQYS6RPX.mjs';
+export { Pressable } from './chunk-P5KC3RTG.mjs';
+export { PricingCard } from './chunk-PPKCGCZ3.mjs';
+export { Progress } from './chunk-FOUSI6JD.mjs';
+export { RadioGroup } from './chunk-BQMJQMWY.mjs';
+export { RetrayProvider } from './chunk-XKBB2UZU.mjs';
+export { ToastProvider, sonnerToast as toast, useToast } from './chunk-VSKBODEY.mjs';
+export { ImageUpload } from './chunk-CCEM3HIJ.mjs';
+export { ImageViewer } from './chunk-ZO5BRTCW.mjs';
+export { PagerDots } from './chunk-E4BJ5WXG.mjs';
+import { ItemGroup, ItemGroupHeader, ItemGroupFooter } from './chunk-2DDJ53DK.mjs';
+export { ItemGroupFooter as ListGroupFooter, ItemGroupHeader as ListGroupHeader, ItemGroupFooter as MenuGroupFooter, ItemGroupHeader as MenuGroupHeader } from './chunk-2DDJ53DK.mjs';
+export { LabelValue } from './chunk-3VHFOSZR.mjs';
+export { ListItem } from './chunk-6T2DVIQT.mjs';
+export { MediaCard } from './chunk-MSS3CD6F.mjs';
+export { MenuItem } from './chunk-BTPCY4C7.mjs';
+export { DetailRow } from './chunk-3RIZCKRM.mjs';
+export { EmptyState } from './chunk-W422TEH2.mjs';
+export { ErrorBoundary } from './chunk-DLAOTHHS.mjs';
+export { Form, FormField, FormFooter, FormSection } from './chunk-GR7PKEKD.mjs';
+export { IconPicker } from './chunk-MQAK2W6L.mjs';
+export { Spinner } from './chunk-K3V6OTVB.mjs';
+export { Image } from './chunk-VISIOH33.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-TMH263OK.mjs';
-export { CategoryStrip } from './chunk-5MYNAAFE.mjs';
-export { Checkbox } from './chunk-77UOVFIS.mjs';
-export { Chip, ChipGroup } from './chunk-RA6SAAFE.mjs';
-export { ConfirmDialog } from './chunk-UMZTPUB3.mjs';
-export { CurrencyDisplay } from './chunk-PI6RULJX.mjs';
-export { CurrencyInput } from './chunk-HUSSF6TF.mjs';
-export { Input } from './chunk-4NQFTHN3.mjs';
-export { Accordion } from './chunk-422IVD3H.mjs';
-export { AlertBanner } from './chunk-K7TKID3V.mjs';
-export { AppHeader } from './chunk-H6MQL7PS.mjs';
-export { IconButton } from './chunk-ZTPYUU5C.mjs';
-export { Avatar, AvatarGroup } from './chunk-IGU223UM.mjs';
-export { Badge } from './chunk-AZV7KNJI.mjs';
-export { Button } from './chunk-Y6YS33GM.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-UEA2VYGW.mjs';
+export { CategoryStrip } from './chunk-5J7VKFSZ.mjs';
+export { Checkbox } from './chunk-AZRATPNP.mjs';
+export { Chip, ChipGroup } from './chunk-BWLVX2SQ.mjs';
+export { ConfirmDialog } from './chunk-BGXOEFDM.mjs';
+export { useSheetModal } from './chunk-HMKJGVXA.mjs';
+export { CurrencyDisplay } from './chunk-EQYTDFDD.mjs';
+export { CurrencyInput } from './chunk-EQNCMDZC.mjs';
+export { Input } from './chunk-3GE4UFV5.mjs';
+export { Accordion } from './chunk-Y5TPAKOS.mjs';
+export { AlertBanner } from './chunk-K4YFTUMC.mjs';
+export { AppHeader } from './chunk-2J5OZOMX.mjs';
+export { IconButton } from './chunk-ZRUUUVOO.mjs';
+export { Avatar, AvatarGroup } from './chunk-SWUZKVYO.mjs';
+export { Badge } from './chunk-YKWIMVGU.mjs';
+export { Button } from './chunk-AHFEAY6M.mjs';
 import './chunk-M53LC4Q7.mjs';
 import './chunk-IFYMBOEN.mjs';
-export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, selectionAsync } from './chunk-ARONDO7M.mjs';
-export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
-export { Icon } from './chunk-MZ6WRTD2.mjs';
-export { ThemeProvider, defaultDark, defaultLight, deriveColors, hexToRgb, useTheme, withAlpha } from './chunk-KSSVIFYR.mjs';
+export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, selectionAsync } from './chunk-CTUFFKGS.mjs';
+export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-DYYPDQA2.mjs';
+export { Icon } from './chunk-24JTXQ2M.mjs';
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, hexToRgb, useTheme, withAlpha } from './chunk-ZQGCQ7SA.mjs';
 import './chunk-2CE3TQVY.mjs';
-import { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+function ListGroup(props) {
+  return /* @__PURE__ */ React.createElement(ItemGroup, { childPropKey: "title", ...props });
+}
+ListGroup.Header = ItemGroupHeader;
+ListGroup.Footer = ItemGroupFooter;
+function MenuGroup(props) {
+  return /* @__PURE__ */ React.createElement(ItemGroup, { childPropKey: "onPress", ...props });
+}
+MenuGroup.Header = ItemGroupHeader;
+MenuGroup.Footer = ItemGroupFooter;
 
 // src/utils/typography.ts
 function getResponsiveFontSize(text, maxSize, steps = [
@@ -77,18 +92,12 @@ function getResponsiveFontSize(text, maxSize, steps = [
 function useConfirmDialog(options) {
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
-  const mountedRef = useRef(true);
   const onConfirmRef = useRef(options.onConfirm);
   const onCancelRef = useRef(options.onCancel);
   useEffect(() => {
     onConfirmRef.current = options.onConfirm;
     onCancelRef.current = options.onCancel;
   });
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
   const open = useCallback(() => setVisible(true), []);
   const handleConfirm = useCallback(async () => {
     setLoading(true);
@@ -96,10 +105,8 @@ function useConfirmDialog(options) {
       await onConfirmRef.current();
     } catch {
     } finally {
-      if (mountedRef.current) {
-        setLoading(false);
-        setVisible(false);
-      }
+      setLoading(false);
+      setVisible(false);
     }
   }, []);
   const handleCancel = useCallback(() => {
@@ -109,4 +116,4 @@ function useConfirmDialog(options) {
   return { visible, loading, open, onConfirm: handleConfirm, onCancel: handleCancel };
 }
 
-export { getResponsiveFontSize, useConfirmDialog };
+export { ListGroup, MenuGroup, getResponsiveFontSize, useConfirmDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "13.2.0",
+  "version": "13.4.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -30,7 +30,8 @@
     "EXAMPLES.md",
     "FONTS.md",
     "DESIGN.md",
-    "SKILL.md"
+    "SKILL.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "postinstall": "node scripts/copy-fonts.js",

package/src/components/Accordion/Accordion.tsx

@@ -8,7 +8,6 @@ import {
 import Animated, {
   Easing,
   useSharedValue,
-  useDerivedValue,
   useAnimatedStyle,
   withTiming,
 } from 'react-native-reanimated'
@@ -76,29 +75,21 @@ function AccordionItemComponent({
     isExpanded.value = isOpen
   }, [isOpen, isExpanded])
 
-  // Derived animated height — height * Number(isExpanded) gives 0 when closed and
-  // the measured height when open. `withTiming` wraps it so every change animates.
-  const derivedHeight = useDerivedValue(() =>
-    withTiming(height.value * Number(isExpanded.value), {
-      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
-      easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease),
-    })
-  )
-
-  const derivedRotation = useDerivedValue(() =>
-    withTiming(isExpanded.value ? 1 : 0, {
+  const bodyStyle = useAnimatedStyle(() => ({
+    height: withTiming(height.value * Number(isExpanded.value), {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
       easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease),
-    })
-  )
-
-  const bodyStyle = useAnimatedStyle(() => ({
-    height: derivedHeight.value,
+    }),
     overflow: 'hidden',
   }))
 
   const rotationStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${derivedRotation.value * 180}deg` }],
+    transform: [{
+      rotate: `${withTiming(isExpanded.value ? 1 : 0, {
+        duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+        easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease),
+      }) * 180}deg`,
+    }],
   }))
 
   return (

package/src/components/AppHeader/AppHeader.tsx

@@ -78,7 +78,9 @@ export function AppHeader({
         />
       ) : null}
       {iconName && !left ? (
-        <Icon name={iconName} size={20} color={colors.foreground} />
+        <View style={styles.iconSlot}>
+          <Icon name={iconName} size={20} color={colors.foreground} />
+        </View>
       ) : null}
     </>
   )
@@ -181,6 +183,12 @@ const styles = StyleSheet.create({
     fontSize: ms(13),
     lineHeight: mvs(16),
   },
+  iconSlot: {
+    width: s(44),
+    height: s(44),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   textCentered: {
     textAlign: 'center',
   },

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState, useId } from 'react'
+import React, { useCallback, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 import {
   BottomSheetModal,
@@ -8,8 +8,9 @@ import {
 } from '@gorhom/bottom-sheet'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Feather } from '@expo/vector-icons'
-import { impactMedium, notificationSuccess, selectionAsync as hapticSelection } from '../../utils/haptics'
+import { notificationSuccess, selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { useSheetModal } from '../../hooks/useSheetModal'
 import { Button } from '../Button'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 
@@ -40,41 +41,10 @@ export function ConfirmDialog({
   onCancel,
   accessibilityHint,
 }: ConfirmDialogProps) {
-  type DialogState = 'idle' | 'presenting' | 'presented' | 'dismissing'
-
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
-  const ref = useRef<BottomSheetModal>(null)
-  const dialogState = useRef<DialogState>('idle')
-  const onCancelRef = useRef(onCancel)
+  const { ref, handleDismiss } = useSheetModal(visible, onCancel)
   const name = useId()
-  const [tick, setTick] = useState(0)
-
-  useEffect(() => {
-    onCancelRef.current = onCancel
-  }, [onCancel])
-
-  const handleDismiss = useCallback(() => {
-    dialogState.current = 'idle'
-    onCancelRef.current?.()
-    setTick((t) => t + 1)
-  }, [])
-
-  useEffect(() => {
-    if (visible) {
-      if (dialogState.current === 'idle') {
-        dialogState.current = 'presenting'
-        impactMedium()
-        ref.current?.present()
-        dialogState.current = 'presented'
-      }
-    } else {
-      if (dialogState.current === 'presented' || dialogState.current === 'presenting') {
-        dialogState.current = 'dismissing'
-        ref.current?.dismiss()
-      }
-    }
-  }, [visible, tick])
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -8,6 +8,8 @@ import { impactLight } from '../../utils/haptics'
 
 export interface ErrorFallbackProps {
   error: Error
+  /** Stack trace from the error boundary. */
+  componentStack: string
   /** Reset the boundary and attempt to re-render children. */
   reset: () => void
 }
@@ -97,13 +99,14 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
     const { error } = this.state
     if (error) {
       const { fallback, title, message } = this.props
+      const componentStack = error.stack ?? ''
       if (typeof fallback === 'function') {
-        return fallback({ error, reset: this.reset })
+        return fallback({ error, componentStack, reset: this.reset })
       }
       if (fallback !== undefined) {
         return fallback
       }
-      return <DefaultErrorFallback error={error} reset={this.reset} title={title} message={message} />
+      return <DefaultErrorFallback error={error} componentStack={componentStack} reset={this.reset} title={title} message={message} />
     }
     return this.props.children
   }

package/src/components/Image/Image.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { View, type ImageStyle } from 'react-native'
+import { Image as ExpoImage, type ImageProps as ExpoImageProps } from 'expo-image'
+import { useTheme } from '../../theme'
+
+export interface ImageProps extends Omit<ExpoImageProps, 'source' | 'style'> {
+  /** Image source URI. */
+  src?: string | null
+  /** Custom fallback shown when image fails to load or src is null. */
+  fallback?: React.ReactNode
+  /** Aspect ratio width/height — e.g. 16/9, 4/3. Sets container height proportionally. */
+  aspectRatio?: number
+  /** Border radius override. Defaults to 0. */
+  borderRadius?: number
+  style?: ImageStyle
+}
+
+export function Image({ src, fallback, aspectRatio, borderRadius = 0, style, ...props }: ImageProps) {
+  const { colors } = useTheme()
+  const [failed, setFailed] = useState(false)
+
+  if (!src || failed) {
+    return fallback ? (
+      <View style={[style, { overflow: 'hidden' }]}>{fallback}</View>
+    ) : (
+      <View
+        style={[
+          { backgroundColor: colors.skeleton, overflow: 'hidden' },
+          borderRadius ? { borderRadius } : undefined,
+          aspectRatio ? { aspectRatio } : undefined,
+          style,
+        ]}
+      />
+    )
+  }
+
+  const imageStyle: ImageStyle = {
+    ...(aspectRatio ? { aspectRatio, width: '100%' as const } : {}),
+    ...(borderRadius ? { borderRadius } : {}),
+  }
+
+  return (
+    <ExpoImage
+      source={{ uri: src }}
+      style={[imageStyle, style]}
+      onError={() => setFailed(true)}
+      {...props}
+    />
+  )
+}

package/src/components/Image/index.ts

@@ -0,0 +1,2 @@
+export { Image } from './Image'
+export type { ImageProps } from './Image'

package/src/components/ImageUpload/ImageUpload.tsx

@@ -137,7 +137,7 @@ export function ImageUpload({
         </View>
       )}
       {loading || isPicking ? (
-        <View style={[styles.loadingOverlay, { backgroundColor: colors.overlay }]}>
+        <View style={[styles.loadingOverlay, { backgroundColor: colors.overlay, borderRadius }]}>
           <Spinner size="md" />
         </View>
       ) : null}

package/src/components/{ListGroup/ListGroup.tsx → ItemGroup/ItemGroup.tsx}

@@ -4,52 +4,41 @@ import { useTheme } from '../../theme'
 import { s, vs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
 
-export type ListGroupVariant = 'plain' | 'card'
+export type ItemGroupVariant = 'plain' | 'card'
 
-export interface ListGroupProps {
+export interface ItemGroupProps {
   children: React.ReactNode
-  /**
-   * - `plain` (default): no background, plain ListItems inside.
-   * - `card`: card surface with background + border wrapping plain ListItems.
-   */
-  variant?: ListGroupVariant
+  variant?: ItemGroupVariant
+  childPropKey: 'title' | 'onPress'
   style?: ViewStyle
 }
 
-export interface ListGroupHeaderProps {
+export interface ItemGroupHeaderProps {
   children: React.ReactNode
   style?: ViewStyle
 }
 
-export interface ListGroupFooterProps {
+export interface ItemGroupFooterProps {
   children: React.ReactNode
   style?: ViewStyle
 }
 
-/**
- * ListGroup wraps multiple ListItems and auto-adds separators between them.
- * Use variant="card" for a standalone surface or "plain" for items inside another container.
- */
-export function ListGroup({ children, variant = 'plain', style }: ListGroupProps) {
+export function ItemGroup({ children, variant = 'plain', childPropKey, style }: ItemGroupProps) {
   const { colors } = useTheme()
 
-  // Auto-inject showSeparator={true} to all ListItem children except the last
   const processedChildren = React.Children.map(children, (child, index) => {
     if (!React.isValidElement(child)) return child
-    
-    // Skip ListGroup.Header and ListGroup.Footer
-    if (child.type === ListGroupHeader || child.type === ListGroupFooter) {
+
+    if (child.type === ItemGroupHeader || child.type === ItemGroupFooter) {
       return child
     }
 
-    // Check if it's a ListItem (has title prop as a heuristic)
     const childProps = child.props as Record<string, unknown>
-    const isListItem = 'title' in childProps
-    if (!isListItem) return child
+    const isTargetChild = childPropKey in childProps
+    if (!isTargetChild) return child
 
     const isLast = index === React.Children.count(children) - 1
 
-    // Only add separator if not already explicitly set and not last item
     if (childProps['showSeparator'] === undefined && !isLast) {
       return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
         showSeparator: true,
@@ -82,9 +71,9 @@ export function ListGroup({ children, variant = 'plain', style }: ListGroupProps
   )
 }
 
-export function ListGroupHeader({ children, style }: ListGroupHeaderProps) {
+export function ItemGroupHeader({ children, style }: ItemGroupHeaderProps) {
   const { colors } = useTheme()
-  
+
   if (typeof children === 'string') {
     return (
       <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>
@@ -98,9 +87,9 @@ export function ListGroupHeader({ children, style }: ListGroupHeaderProps) {
   return <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>{children}</View>
 }
 
-export function ListGroupFooter({ children, style }: ListGroupFooterProps) {
+export function ItemGroupFooter({ children, style }: ItemGroupFooterProps) {
   const { colors } = useTheme()
-  
+
   if (typeof children === 'string') {
     return (
       <View style={[styles.footer, style]}>
@@ -114,9 +103,6 @@ export function ListGroupFooter({ children, style }: ListGroupFooterProps) {
   return <View style={[styles.footer, style]}>{children}</View>
 }
 
-ListGroup.Header = ListGroupHeader
-ListGroup.Footer = ListGroupFooter
-
 const styles = StyleSheet.create({
   container: {
     overflow: 'hidden',

package/src/components/ItemGroup/index.ts

@@ -0,0 +1,2 @@
+export { ItemGroup, ItemGroupHeader, ItemGroupFooter } from './ItemGroup'
+export type { ItemGroupProps, ItemGroupVariant, ItemGroupHeaderProps, ItemGroupFooterProps } from './ItemGroup'

package/src/components/ListGroup/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ItemGroup as BaseItemGroup, ItemGroupHeader, ItemGroupFooter } from '../ItemGroup'
+import type { ItemGroupProps, ItemGroupVariant, ItemGroupHeaderProps, ItemGroupFooterProps } from '../ItemGroup'
+
+export type ListGroupVariant = ItemGroupVariant
+
+export interface ListGroupProps extends Omit<ItemGroupProps, 'childPropKey'> {}
+
+export interface ListGroupHeaderProps extends ItemGroupHeaderProps {}
+
+export interface ListGroupFooterProps extends ItemGroupFooterProps {}
+
+export function ListGroup(props: ListGroupProps) {
+  return <BaseItemGroup childPropKey="title" {...props} />
+}
+
+ListGroup.Header = ItemGroupHeader
+ListGroup.Footer = ItemGroupFooter
+
+export { ItemGroupHeader as ListGroupHeader, ItemGroupFooter as ListGroupFooter }

package/src/components/MenuGroup/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ItemGroup as BaseItemGroup, ItemGroupHeader, ItemGroupFooter } from '../ItemGroup'
+import type { ItemGroupProps, ItemGroupVariant, ItemGroupHeaderProps, ItemGroupFooterProps } from '../ItemGroup'
+
+export type MenuGroupVariant = ItemGroupVariant
+
+export interface MenuGroupProps extends Omit<ItemGroupProps, 'childPropKey'> {}
+
+export interface MenuGroupHeaderProps extends ItemGroupHeaderProps {}
+
+export interface MenuGroupFooterProps extends ItemGroupFooterProps {}
+
+export function MenuGroup(props: MenuGroupProps) {
+  return <BaseItemGroup childPropKey="onPress" {...props} />
+}
+
+MenuGroup.Header = ItemGroupHeader
+MenuGroup.Footer = ItemGroupFooter
+
+export { ItemGroupHeader as MenuGroupHeader, ItemGroupFooter as MenuGroupFooter }

package/src/components/Pressable/Pressable.tsx

@@ -5,42 +5,18 @@ import { PressableCard } from '../../utils/pressable'
 import { PRESS_SCALE } from '../../utils/animations'
 
 export interface PressableProps {
-  /** Children content to render inside the pressable. */
   children: React.ReactNode
-  /** Called when pressed. */
   onPress?: () => void
-  /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
   pressScale?: number
-  /** Enable haptic feedback on press. Defaults to `true`. */
   haptics?: boolean
-  /** Additional style for the wrapper. */
   style?: ViewStyle
-  /** Disable interaction. */
   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
 }
 
-/**
- * Generic pressable with a calibrated spring bounce — Apple HIG / Airbnb feel.
- * All animation runs on the UI thread via pressto (Reanimated v4 worklets).
- *
- * Use this for any custom pressable surface that needs consistent press feel
- * (cards, list rows, image tiles, etc).
- */
 export function Pressable({
   children,
   onPress,