@retray-dev/ui-kit 13.0.0 → 13.4.0

package/src/components/MenuGroup/MenuGroup.tsx

@@ -1,145 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet, ViewStyle } from 'react-native'
-import { useTheme } from '../../theme'
-import { s, vs } from '../../utils/scaling'
-import { RADIUS } from '../../tokens'
-
-export type MenuGroupVariant = 'plain' | 'card'
-
-export interface MenuGroupProps {
-  children: React.ReactNode
-  /**
-   * - `plain` (default): no background, plain MenuItems inside.
-   * - `card`: card surface with background + border wrapping plain MenuItems.
-   */
-  variant?: MenuGroupVariant
-  style?: ViewStyle
-}
-
-export interface MenuGroupHeaderProps {
-  children: React.ReactNode
-  style?: ViewStyle
-}
-
-export interface MenuGroupFooterProps {
-  children: React.ReactNode
-  style?: ViewStyle
-}
-
-/**
- * MenuGroup wraps multiple MenuItems and auto-adds separators between them.
- * Use variant="card" for a standalone surface or "plain" for items inside another container.
- */
-export function MenuGroup({ children, variant = 'plain', style }: MenuGroupProps) {
-  const { colors } = useTheme()
-
-  // Auto-inject showSeparator={true} to all MenuItem children except the last
-  const processedChildren = React.Children.map(children, (child, index) => {
-    if (!React.isValidElement(child)) return child
-    
-    // Skip MenuGroup.Header and MenuGroup.Footer
-    if (child.type === MenuGroupHeader || child.type === MenuGroupFooter) {
-      return child
-    }
-
-    // Check if it's a MenuItem (has onPress prop as a heuristic)
-    const childProps = child.props as Record<string, unknown>
-    const isMenuItem = 'onPress' in childProps
-    if (!isMenuItem) 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,
-      })
-    }
-
-    return child
-  })
-
-  const cardStyle: ViewStyle =
-    variant === 'card'
-      ? {
-          backgroundColor: colors.card,
-          borderRadius: RADIUS.md,
-          borderWidth: 1,
-          borderColor: colors.border,
-          shadowColor: '#000',
-          shadowOffset: { width: 0, height: 2 },
-          shadowOpacity: 0.06,
-          shadowRadius: 6,
-          elevation: 2,
-          paddingVertical: vs(4),
-        }
-      : {}
-
-  return (
-    <View style={[styles.container, cardStyle, style]}>
-      {processedChildren}
-    </View>
-  )
-}
-
-export function MenuGroupHeader({ children, style }: MenuGroupHeaderProps) {
-  const { colors } = useTheme()
-  
-  if (typeof children === 'string') {
-    return (
-      <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>
-        <Text style={[styles.headerText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-          {children}
-        </Text>
-      </View>
-    )
-  }
-
-  return <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>{children}</View>
-}
-
-export function MenuGroupFooter({ children, style }: MenuGroupFooterProps) {
-  const { colors } = useTheme()
-  
-  if (typeof children === 'string') {
-    return (
-      <View style={[styles.footer, style]}>
-        <Text style={[styles.footerText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-          {children}
-        </Text>
-      </View>
-    )
-  }
-
-  return <View style={[styles.footer, style]}>{children}</View>
-}
-
-MenuGroup.Header = MenuGroupHeader
-MenuGroup.Footer = MenuGroupFooter
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-  },
-  header: {
-    paddingHorizontal: s(16),
-    paddingTop: vs(12),
-    paddingBottom: vs(8),
-    borderBottomWidth: StyleSheet.hairlineWidth,
-  },
-  headerText: {
-    fontFamily: 'Sohne-SemiBold',
-    fontSize: 13,
-    letterSpacing: 0.32,
-    textTransform: 'uppercase',
-  },
-  footer: {
-    paddingHorizontal: s(16),
-    paddingTop: vs(8),
-    paddingBottom: vs(12),
-  },
-  footerText: {
-    fontFamily: 'Sohne-Regular',
-    fontSize: 12,
-  },
-})

package/src/components/MenuGroup/index.ts

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