@umituz/react-native-design-system 2.9.30 → 2.9.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.9.30",
+  "version": "2.9.31",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/exports/molecules.ts

@@ -29,7 +29,6 @@ export {
   // Bottom Sheet
   BottomSheet,
   BottomSheetModal,
-
   FilterBottomSheet,
   FilterSheet,
   useBottomSheet,
@@ -114,8 +113,6 @@ export {
   type FabButtonProps,
   type TabScreen,
   type TabNavigatorConfig,
-  type StackScreen,
-  type StackNavigatorConfig,
   type BaseScreen,
   type BaseNavigatorConfig,
   type IconRendererProps,
@@ -190,5 +187,4 @@ export {
   InfoGrid,
   type InfoGridProps,
   type InfoGridItem,
-} from '../molecules';
-
+} from "../molecules";

package/src/molecules/circular-menu/CircularMenu.tsx

@@ -0,0 +1,151 @@
+import React, { useMemo } from "react";
+import {
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  ViewStyle,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  ARC_BACKGROUND,
+  OVERLAY,
+  ROW_CONFIG,
+  LAYOUT,
+  getTopRowPosition,
+  getBottomRowPosition,
+} from "./constants";
+import { CircularMenuBackground } from "./CircularMenuBackground";
+import { CircularMenuItem } from "./CircularMenuItem";
+import { CircularMenuCloseButton } from "./CircularMenuCloseButton";
+
+export interface CircularMenuAction {
+  id: string;
+  label: string;
+  icon: string;
+  onPress: () => void;
+}
+
+export interface CircularMenuProps {
+  visible: boolean;
+  onClose: () => void;
+  actions: CircularMenuAction[];
+}
+
+export const CircularMenu: React.FC<CircularMenuProps> = ({
+  visible,
+  onClose,
+  actions,
+}) => {
+  const insets = useSafeAreaInsets();
+
+  /**
+   * Determine layout based on number of items.
+   * If strictly 3 items, use the specific "Top Triangle" layout requested.
+   * Otherwise, use a generic algorithm.
+   */
+  const layoutItems = useMemo(() => {
+    if (actions.length === 3) {
+      // Triangle Layout: Top Center (Index 1), Bottom Left (Index 0), Bottom Right (Index 2)
+      return [
+        { ...actions[1], position: getTopRowPosition(0, 1) }, // Text to Video (Top Center)
+        { ...actions[0], position: getBottomRowPosition("left") }, // Text to Image (Bottom Left)
+        { ...actions[2], position: getBottomRowPosition("right") }, // Image to Video (Bottom Right)
+      ];
+    } else {
+      // Default: 2 on top, 2 on-bottom, etc.
+      // This is a fallback if actions change.
+      // For now, implementing simple distribute:
+      const topCount = Math.min(actions.length, 2);
+      const bottomCount = Math.max(0, actions.length - 2);
+      
+      const mapped = [];
+      // Top row
+      for (let i = 0; i < topCount; i++) {
+        mapped.push({
+          ...actions[i],
+          position: getTopRowPosition(i, topCount),
+        });
+      }
+      // Bottom row (left/right)
+      if (bottomCount > 0) {
+        mapped.push({
+           ...actions[2],
+           position: getBottomRowPosition("left")
+        })
+      }
+      if (bottomCount > 1) {
+         mapped.push({
+            ...actions[3],
+            position: getBottomRowPosition("right")
+         })
+      }
+      return mapped;
+    }
+  }, [actions]);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay}>
+          <TouchableWithoutFeedback>
+            <View
+              style={[
+                styles.container,
+                {
+                  paddingBottom: insets.bottom + OVERLAY.PADDING_BOTTOM_OFFSET,
+                },
+              ]}
+            >
+              <CircularMenuBackground />
+
+              <View style={styles.itemsContainer}>
+                {layoutItems.map((item) => (
+                  <View key={item.id} style={item.position as ViewStyle}>
+                    <CircularMenuItem
+                      icon={item.icon}
+                      label={item.label}
+                      onPress={item.onPress}
+                    />
+                  </View>
+                ))}
+
+                <View style={styles.closeButton}>
+                  <CircularMenuCloseButton onPress={onClose} />
+                </View>
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0, 0, 0, 0.85)",
+  },
+  container: {
+    alignItems: "center",
+  },
+  itemsContainer: {
+    width: ARC_BACKGROUND.WIDTH,
+    height: ARC_BACKGROUND.HEIGHT,
+    position: "relative",
+  },
+  closeButton: {
+    position: "absolute",
+    left: ARC_BACKGROUND.WIDTH / 2 - LAYOUT.CLOSE_BUTTON_SIZE / 2,
+    top:
+      ROW_CONFIG.CENTER_Y + ROW_CONFIG.BOTTOM_Y - LAYOUT.CLOSE_BUTTON_SIZE / 2,
+  },
+});

package/src/molecules/circular-menu/CircularMenuBackground.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "../../theme/useAppDesignTokens";
+import { ARC_BACKGROUND } from "./constants";
+
+export const CircularMenuBackground: React.FC = () => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        styles.arc,
+        {
+          backgroundColor: tokens.colors.surface,
+          width: ARC_BACKGROUND.WIDTH,
+          height: ARC_BACKGROUND.HEIGHT,
+          borderTopLeftRadius: ARC_BACKGROUND.BORDER_RADIUS_TOP,
+          borderTopRightRadius: ARC_BACKGROUND.BORDER_RADIUS_TOP,
+        },
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  arc: {
+    position: "absolute",
+    bottom: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+});

package/src/molecules/circular-menu/CircularMenuCloseButton.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon } from "../../atoms/AtomicIcon";
+import { useAppDesignTokens } from "../../theme/useAppDesignTokens";
+import { LAYOUT } from "./constants";
+
+export interface CircularMenuCloseButtonProps {
+  onPress: () => void;
+}
+
+export const CircularMenuCloseButton: React.FC<CircularMenuCloseButtonProps> = ({
+  onPress,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[
+        styles.container,
+        {
+          backgroundColor: tokens.colors.surfaceVariant,
+          width: LAYOUT.CLOSE_BUTTON_SIZE,
+          height: LAYOUT.CLOSE_BUTTON_SIZE,
+          borderRadius: LAYOUT.CLOSE_BUTTON_SIZE / 2,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+        },
+      ]}
+      activeOpacity={0.8}
+      accessibilityRole="button"
+      accessibilityLabel="Close menu"
+    >
+      <AtomicIcon name="close" size="md" color="secondary" />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/src/molecules/circular-menu/CircularMenuItem.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { AtomicIcon } from "../../atoms/AtomicIcon";
+import { AtomicText } from "../../atoms/AtomicText";
+import { useAppDesignTokens } from "../../theme/useAppDesignTokens";
+import { LAYOUT } from "./constants";
+
+export interface CircularMenuItemProps {
+  icon: string;
+  label: string;
+  onPress: () => void;
+}
+
+export const CircularMenuItem: React.FC<CircularMenuItemProps> = ({
+  icon,
+  label,
+  onPress,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={styles.container}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+    >
+      <View
+        style={[
+          styles.iconContainer,
+          {
+            backgroundColor: tokens.colors.surfaceVariant,
+            width: LAYOUT.ITEM_SIZE,
+            height: LAYOUT.ITEM_SIZE,
+            borderRadius: LAYOUT.ITEM_SIZE / 2,
+            borderWidth: 1,
+            borderColor: tokens.colors.border,
+          },
+        ]}
+      >
+        <AtomicIcon name={icon as any} size="lg" color="primary" />
+      </View>
+      <AtomicText
+        type="labelSmall"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    gap: 6,
+    width: 90,
+  },
+  iconContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "500",
+    textAlign: "center",
+  },
+});

package/src/molecules/circular-menu/constants.ts

@@ -0,0 +1,73 @@
+import { ViewStyle } from "react-native";
+
+export const LAYOUT = {
+  ITEM_SIZE: 52,
+  CLOSE_BUTTON_SIZE: 48,
+} as const;
+
+export const ROW_CONFIG = {
+  TOP_RADIUS: 80,
+  TOP_START_ANGLE: -135,
+  TOP_END_ANGLE: -45,
+  BOTTOM_OFFSET_X: 160,
+  BOTTOM_Y: 60,
+  CENTER_Y: 150,
+} as const;
+
+export const ARC_BACKGROUND = {
+  WIDTH: 450,
+  HEIGHT: 280,
+  BORDER_RADIUS_TOP: 225,
+} as const;
+
+export const OVERLAY = {
+  PADDING_BOTTOM_OFFSET: 0,
+} as const;
+
+const CENTER_X = ARC_BACKGROUND.WIDTH / 2;
+
+function toRadians(degrees: number): number {
+  return (degrees * Math.PI) / 180;
+}
+
+export function getTopRowPosition(
+  index: number,
+  totalInRow: number
+): ViewStyle {
+  if (totalInRow <= 1) {
+    const radian = toRadians(-90);
+    const x = ROW_CONFIG.TOP_RADIUS * Math.cos(radian);
+    const y = ROW_CONFIG.TOP_RADIUS * Math.sin(radian);
+
+    return {
+      position: "absolute",
+      left: CENTER_X + x - LAYOUT.ITEM_SIZE / 2,
+      top: ROW_CONFIG.CENTER_Y + y - LAYOUT.ITEM_SIZE / 2,
+    };
+  }
+
+  const arcSpan = ROW_CONFIG.TOP_END_ANGLE - ROW_CONFIG.TOP_START_ANGLE;
+  const step = arcSpan / (totalInRow - 1);
+  const angle = ROW_CONFIG.TOP_START_ANGLE + step * index;
+  const radian = toRadians(angle);
+
+  const x = ROW_CONFIG.TOP_RADIUS * Math.cos(radian);
+  const y = ROW_CONFIG.TOP_RADIUS * Math.sin(radian);
+
+  return {
+    position: "absolute",
+    left: CENTER_X + x - LAYOUT.ITEM_SIZE / 2,
+    top: ROW_CONFIG.CENTER_Y + y - LAYOUT.ITEM_SIZE / 2,
+  };
+}
+
+export function getBottomRowPosition(side: "left" | "right"): ViewStyle {
+  const offsetX =
+    side === "left" ? -ROW_CONFIG.BOTTOM_OFFSET_X : ROW_CONFIG.BOTTOM_OFFSET_X;
+
+  return {
+    position: "absolute",
+    left: CENTER_X + offsetX - LAYOUT.ITEM_SIZE / 2,
+    top: ROW_CONFIG.CENTER_Y + ROW_CONFIG.BOTTOM_Y - LAYOUT.ITEM_SIZE / 2,
+  };
+}

package/src/molecules/circular-menu/index.ts

@@ -0,0 +1,4 @@
+export * from "./CircularMenu";
+export * from "./CircularMenuItem";
+export * from "./CircularMenuBackground";
+export * from "./CircularMenuCloseButton";

package/src/molecules/index.ts

@@ -64,3 +64,4 @@ export * from './hero-section';
 export * from './info-grid';
 
 
+export * from './circular-menu';

package/src/molecules/navigation/components/NavigationContainer.tsx

@@ -0,0 +1,13 @@
+import { NavigationContainerRef } from "@react-navigation/native";
+
+/**
+ * NavigationContainer Component
+ *
+ * Wrapper around React Navigation's NavigationContainerRef
+ * Provides navigation support to applications.
+ */
+export const NavigationContainer: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  return <NavigationContainerRef>{children}</NavigationContainerRef>;
+};

package/src/molecules/navigation/components/index.ts

@@ -0,0 +1,4 @@
+export { NavigationContainer } from "./NavigationContainer";
+export { NavigationHeader } from "./NavigationHeader";
+export { TabLabel } from "./TabLabel";
+export { FabButton } from "./FabButton";

package/src/molecules/navigation/index.ts

@@ -3,6 +3,7 @@ export { createStackNavigator } from "./createStackNavigator";
 export { TabsNavigator, type TabsNavigatorProps } from "./TabsNavigator";
 export { StackNavigator, type StackNavigatorProps } from "./StackNavigator";
 export { FabButton, type FabButtonProps } from "./components/FabButton";
+export { NavigationContainer } from "./components/NavigationContainer";
 
 export type {
   TabScreen,
@@ -34,7 +35,7 @@ export type { NavigationCleanup } from "./utils/NavigationCleanup";
 // Navigation Utilities
 export { AppNavigation } from "./utils/AppNavigation";
 export { TabLabel, type TabLabelProps } from "./components/TabLabel";
-export * from './components/NavigationHeader';
+export * from "./components/NavigationHeader";
 export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
 export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
 export { useAppNavigation } from "./hooks/useAppNavigation";