@urbint/cl 1.0.1

package/src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,363 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Menu } from './Menu';
+import { Button } from '../Button';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius, elevation } from '../../styles/tokens';
+
+const meta: Meta<typeof Menu> = {
+  title: 'Overlay/Menu',
+  component: Menu,
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+    },
+    closeOnSelect: { control: 'boolean' },
+  },
+  args: {
+    placement: 'bottom-start',
+    closeOnSelect: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Menu>;
+
+export const Default: Story = {
+  render: () => (
+    <Box p={50}>
+      <Menu
+        trigger={<Button>Open Menu</Button>}
+        items={[
+          { label: 'Edit', value: 'edit' },
+          { label: 'Duplicate', value: 'duplicate' },
+          { label: 'Delete', value: 'delete' },
+        ]}
+        onItemPress={(value) => console.log('Selected:', value)}
+      />
+    </Box>
+  ),
+};
+
+const PlacementDemo = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Menu Placement</Text>
+    <HStack space={spacing.lg} wrap>
+      <Menu
+        trigger={<Button size="sm">Bottom Start</Button>}
+        placement="bottom-start"
+        items={[
+          { label: 'Item 1', value: '1' },
+          { label: 'Item 2', value: '2' },
+        ]}
+        onItemPress={(value) => console.log(value)}
+      />
+      <Menu
+        trigger={<Button size="sm">Bottom End</Button>}
+        placement="bottom-end"
+        items={[
+          { label: 'Item 1', value: '1' },
+          { label: 'Item 2', value: '2' },
+        ]}
+        onItemPress={(value) => console.log(value)}
+      />
+    </HStack>
+  </VStack>
+);
+
+export const Placement: Story = {
+  render: () => <PlacementDemo />,
+};
+
+const WithIcons = () => {
+  const EditIcon = (
+    <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+        stroke={colors.text.secondary}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+
+  const CopyIcon = (
+    <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+        stroke={colors.text.secondary}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+
+  const TrashIcon = (
+    <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+        stroke={colors.text.secondary}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Menu with Icons</Text>
+      <Box p={50}>
+        <Menu
+          trigger={<Button>Actions</Button>}
+          items={[
+            { label: 'Edit', value: 'edit', icon: EditIcon },
+            { label: 'Duplicate', value: 'duplicate', icon: CopyIcon },
+            { label: 'Delete', value: 'delete', icon: TrashIcon },
+          ]}
+          onItemPress={(value) => console.log('Selected:', value)}
+        />
+      </Box>
+    </VStack>
+  );
+};
+
+export const Icons: Story = {
+  render: () => <WithIcons />,
+};
+
+const WithDivider = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Menu with Dividers</Text>
+    <Box p={50}>
+      <Menu
+        trigger={<Button>File</Button>}
+        items={[
+          { label: 'New File', value: 'new' },
+          { label: 'Open', value: 'open' },
+          { label: 'Save', value: 'save' },
+          { label: '', value: 'divider1', isDivider: true },
+          { label: 'Export', value: 'export' },
+          { label: 'Print', value: 'print' },
+          { label: '', value: 'divider2', isDivider: true },
+          { label: 'Close', value: 'close' },
+        ]}
+        onItemPress={(value) => console.log('Selected:', value)}
+      />
+    </Box>
+  </VStack>
+);
+
+export const WithDividers: Story = {
+  render: () => <WithDivider />,
+};
+
+const DisabledItems = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Menu with Disabled Items</Text>
+    <Box p={50}>
+      <Menu
+        trigger={<Button>Options</Button>}
+        items={[
+          { label: 'Available Option', value: 'available' },
+          { label: 'Disabled Option', value: 'disabled', isDisabled: true },
+          { label: 'Pro Feature (upgrade)', value: 'pro', isDisabled: true },
+          { label: 'Another Available', value: 'another' },
+        ]}
+        onItemPress={(value) => console.log('Selected:', value)}
+      />
+    </Box>
+  </VStack>
+);
+
+export const Disabled: Story = {
+  render: () => <DisabledItems />,
+};
+
+const ContextMenu = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Context Menu Style</Text>
+    <Box p={50}>
+      <Menu
+        trigger={
+          <Box
+            p={spacing.md}
+            bg={colors.background.secondary}
+            rounded="md"
+            style={{ cursor: 'pointer' }}
+          >
+            <Text>Right-click or tap to open menu</Text>
+          </Box>
+        }
+        items={[
+          { label: 'Cut', value: 'cut' },
+          { label: 'Copy', value: 'copy' },
+          { label: 'Paste', value: 'paste' },
+          { label: '', value: 'divider', isDivider: true },
+          { label: 'Select All', value: 'select_all' },
+        ]}
+        onItemPress={(value) => console.log('Selected:', value)}
+      />
+    </Box>
+  </VStack>
+);
+
+export const Context: Story = {
+  render: () => <ContextMenu />,
+};
+
+const DropdownNavigation = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Navigation Dropdown</Text>
+    <Box p={spacing.lg} bg={colors.white} rounded="lg" shadow="10">
+      <HStack space={spacing.lg}>
+        <Text>Home</Text>
+        <Menu
+          trigger={
+            <HStack space={spacing.xs} alignItems="center">
+              <Text>Products</Text>
+              <Text variant="small">▼</Text>
+            </HStack>
+          }
+          items={[
+            { label: 'All Products', value: 'all' },
+            { label: 'Electronics', value: 'electronics' },
+            { label: 'Clothing', value: 'clothing' },
+            { label: 'Home & Garden', value: 'home' },
+          ]}
+          onItemPress={(value) => console.log('Navigate to:', value)}
+        />
+        <Menu
+          trigger={
+            <HStack space={spacing.xs} alignItems="center">
+              <Text>Services</Text>
+              <Text variant="small">▼</Text>
+            </HStack>
+          }
+          items={[
+            { label: 'Consulting', value: 'consulting' },
+            { label: 'Development', value: 'development' },
+            { label: 'Support', value: 'support' },
+          ]}
+          onItemPress={(value) => console.log('Navigate to:', value)}
+        />
+        <Text>Contact</Text>
+      </HStack>
+    </Box>
+  </VStack>
+);
+
+export const Navigation: Story = {
+  render: () => <DropdownNavigation />,
+};
+
+const UserMenu = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">User Menu</Text>
+    <Box p={50}>
+      <Menu
+        trigger={
+          <HStack space={spacing.sm} alignItems="center" style={{ cursor: 'pointer' }}>
+            <Box
+              w={36}
+              h={36}
+              rounded="full"
+              bg={colors.brand.blue + '30'}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text weight="semiBold">JD</Text>
+            </Box>
+            <Text>▼</Text>
+          </HStack>
+        }
+        placement="bottom-end"
+        items={[
+          { label: 'Profile', value: 'profile' },
+          { label: 'Settings', value: 'settings' },
+          { label: 'Notifications', value: 'notifications' },
+          { label: '', value: 'divider', isDivider: true },
+          { label: 'Help', value: 'help' },
+          { label: 'Sign Out', value: 'signout' },
+        ]}
+        onItemPress={(value) => console.log('Selected:', value)}
+      />
+    </Box>
+  </VStack>
+);
+
+export const User: Story = {
+  render: () => <UserMenu />,
+};
+
+const TableRowMenu = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Table Row Actions</Text>
+    <Box p={spacing.lg} bg={colors.background.secondary} rounded="lg">
+      {['Project Alpha', 'Project Beta', 'Project Gamma'].map((project) => (
+        <HStack key={project} justifyContent="space-between" alignItems="center" py={spacing.md}>
+          <Text>{project}</Text>
+          <Menu
+            trigger={
+              <Box p={spacing.sm} rounded="md" bg={colors.border.default}>
+                <Text>⋮</Text>
+              </Box>
+            }
+            placement="bottom-end"
+            items={[
+              { label: 'View', value: 'view' },
+              { label: 'Edit', value: 'edit' },
+              { label: 'Share', value: 'share' },
+              { label: '', value: 'divider', isDivider: true },
+              { label: 'Archive', value: 'archive' },
+              { label: 'Delete', value: 'delete' },
+            ]}
+            onItemPress={(value) => console.log(`${value} ${project}`)}
+          />
+        </HStack>
+      ))}
+    </Box>
+  </VStack>
+);
+
+export const TableRow: Story = {
+  render: () => <TableRowMenu />,
+};
+
+const SortMenu = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Sort Menu</Text>
+    <Box p={50}>
+      <Menu
+        trigger={
+          <Button variant="outline" size="sm">
+            Sort by ▼
+          </Button>
+        }
+        items={[
+          { label: 'Name (A-Z)', value: 'name_asc' },
+          { label: 'Name (Z-A)', value: 'name_desc' },
+          { label: '', value: 'divider', isDivider: true },
+          { label: 'Date (Newest)', value: 'date_desc' },
+          { label: 'Date (Oldest)', value: 'date_asc' },
+          { label: '', value: 'divider2', isDivider: true },
+          { label: 'Size (Largest)', value: 'size_desc' },
+          { label: 'Size (Smallest)', value: 'size_asc' },
+        ]}
+        onItemPress={(value) => console.log('Sort by:', value)}
+      />
+    </Box>
+  </VStack>
+);
+
+export const Sort: Story = {
+  render: () => <SortMenu />,
+};
+

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,238 @@
+/**
+ * Menu Component
+ * Dropdown menu for actions
+ */
+
+import React, { forwardRef, useState, useRef, useCallback } from 'react';
+import {
+  View,
+  ViewProps,
+  Pressable,
+  Text,
+  Modal,
+  Animated,
+  LayoutRectangle,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+import { colors, spacing, borderRadius, typography, elevation } from '../../styles/tokens';
+
+const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export interface MenuItemType {
+  label: string;
+  value: string;
+  icon?: React.ReactNode;
+  isDisabled?: boolean;
+  isDivider?: boolean;
+}
+
+export interface MenuProps extends ViewProps {
+  /** Menu trigger element */
+  trigger: React.ReactElement;
+  /** Menu items */
+  items: MenuItemType[];
+  /** On item press handler */
+  onItemPress?: (value: string) => void;
+  /** Placement */
+  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+  /** Close on item press */
+  closeOnSelect?: boolean;
+}
+
+export const Menu = forwardRef<View, MenuProps>(
+  (
+    {
+      style,
+      trigger,
+      items,
+      onItemPress,
+      placement = 'bottom-start',
+      closeOnSelect = true,
+      ...props
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(null);
+    const triggerRef = useRef<View>(null);
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const scaleAnim = useRef(new Animated.Value(0.95)).current;
+
+    const handleTriggerPress = useCallback(() => {
+      triggerRef.current?.measureInWindow((x, y, width, height) => {
+        setTriggerLayout({ x, y, width, height });
+        setIsOpen(true);
+        Animated.parallel([
+          Animated.timing(opacityAnim, {
+            toValue: 1,
+            duration: 150,
+            useNativeDriver: true,
+          }),
+          Animated.spring(scaleAnim, {
+            toValue: 1,
+            useNativeDriver: true,
+            tension: 100,
+            friction: 8,
+          }),
+        ]).start();
+      });
+    }, []);
+
+    const handleClose = useCallback(() => {
+      Animated.parallel([
+        Animated.timing(opacityAnim, {
+          toValue: 0,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 0.95,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setIsOpen(false);
+      });
+    }, []);
+
+    const handleItemPress = (item: MenuItemType) => {
+      if (item.isDisabled || item.isDivider) return;
+      onItemPress?.(item.value);
+      if (closeOnSelect) {
+        handleClose();
+      }
+    };
+
+    const getMenuPosition = () => {
+      if (!triggerLayout) return {};
+
+      const menuWidth = 200;
+      const menuMaxHeight = 300;
+
+      let top = triggerLayout.y + triggerLayout.height + 4;
+      let left = triggerLayout.x;
+
+      if (placement.includes('end')) {
+        left = triggerLayout.x + triggerLayout.width - menuWidth;
+      }
+
+      if (placement.includes('top')) {
+        top = triggerLayout.y - menuMaxHeight - 4;
+      }
+
+      if (left + menuWidth > SCREEN_WIDTH) {
+        left = SCREEN_WIDTH - menuWidth - 16;
+      }
+      if (left < 16) {
+        left = 16;
+      }
+
+      return { top, left, minWidth: Math.min(triggerLayout.width, menuWidth) };
+    };
+
+    // Clone trigger and inject onPress handler
+    const triggerWithHandler = React.cloneElement(trigger, {
+      onPress: (e: any) => {
+        // Call original onPress if exists
+        (trigger.props as any)?.onPress?.(e);
+        // Then open menu
+        handleTriggerPress();
+      },
+    } as any);
+
+    return (
+      <View ref={ref} {...props}>
+        <View ref={triggerRef} collapsable={false}>
+          {triggerWithHandler}
+        </View>
+        <Modal
+          visible={isOpen}
+          transparent
+          animationType="none"
+          onRequestClose={handleClose}
+        >
+          <Pressable style={styles.overlay} onPress={handleClose}>
+            <Animated.View
+              style={[
+                styles.menu,
+                getMenuPosition(),
+                {
+                  opacity: opacityAnim,
+                  transform: [{ scale: scaleAnim }],
+                },
+                style,
+              ]}
+            >
+              {items.map((item, index) => {
+                if (item.isDivider) {
+                  return <View key={`divider-${index}`} style={styles.divider} />;
+                }
+
+                return (
+                  <Pressable
+                    key={item.value}
+                    onPress={() => handleItemPress(item)}
+                    disabled={item.isDisabled}
+                    style={[styles.menuItem, item.isDisabled && styles.menuItemDisabled]}
+                  >
+                    {item.icon && <View style={styles.menuItemIcon}>{item.icon}</View>}
+                    <Text
+                      style={[
+                        styles.menuItemLabel,
+                        item.isDisabled && styles.menuItemLabelDisabled,
+                      ]}
+                    >
+                      {item.label}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </Animated.View>
+          </Pressable>
+        </Modal>
+      </View>
+    );
+  }
+);
+
+Menu.displayName = 'Menu';
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+  },
+  menu: {
+    position: 'absolute',
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+    minWidth: 160,
+    maxWidth: 280,
+    paddingVertical: spacing.base,
+    ...elevation['30'],
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing['3x'],
+    paddingHorizontal: spacing['3x'],
+  },
+  menuItemDisabled: {
+    opacity: 0.5,
+  },
+  menuItemIcon: {
+    marginRight: spacing['3x'],
+  },
+  menuItemLabel: {
+    fontSize: typography.fontSize.body,
+    color: colors.text.default,
+  },
+  menuItemLabelDisabled: {
+    color: colors.text.disabled,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: colors.border.disabled,
+    marginVertical: spacing.base,
+  },
+});

package/src/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export { Menu, type MenuProps, type MenuItemType } from './Menu';
+