@urbint/cl 1.0.1

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,330 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Popover, PopoverHeader, PopoverBody, PopoverFooter } from './Popover';
+import { Button } from '../Button';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { Input } from '../Input';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+const meta: Meta<typeof Popover> = {
+  title: 'Overlay/Popover',
+  component: Popover,
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+    closeOnBlur: { control: 'boolean' },
+    hasArrow: { control: 'boolean' },
+  },
+  args: {
+    placement: 'bottom',
+    closeOnBlur: true,
+    hasArrow: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {
+  render: () => (
+    <Box p={50} alignItems="center">
+      <Popover
+        trigger={<Button>Open Popover</Button>}
+      >
+        <PopoverHeader>Popover Title</PopoverHeader>
+        <PopoverBody>
+          <Text>This is the popover content. You can put any content here.</Text>
+        </PopoverBody>
+      </Popover>
+    </Box>
+  ),
+};
+
+const PlacementDemo = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Popover Placement</Text>
+    <Box p={80} alignItems="center">
+      <VStack space={spacing.lg} alignItems="center">
+        <Popover
+          trigger={<Button size="sm">Top</Button>}
+          placement="top"
+        >
+          <PopoverBody>
+            <Text>Popover on top</Text>
+          </PopoverBody>
+        </Popover>
+        
+        <HStack space={100}>
+          <Popover
+            trigger={<Button size="sm">Left</Button>}
+            placement="left"
+          >
+            <PopoverBody>
+              <Text>Popover on left</Text>
+            </PopoverBody>
+          </Popover>
+          
+          <Popover
+            trigger={<Button size="sm">Right</Button>}
+            placement="right"
+          >
+            <PopoverBody>
+              <Text>Popover on right</Text>
+            </PopoverBody>
+          </Popover>
+        </HStack>
+        
+        <Popover
+          trigger={<Button size="sm">Bottom</Button>}
+          placement="bottom"
+        >
+          <PopoverBody>
+            <Text>Popover on bottom</Text>
+          </PopoverBody>
+        </Popover>
+      </VStack>
+    </Box>
+  </VStack>
+);
+
+export const Placement: Story = {
+  render: () => <PlacementDemo />,
+};
+
+const WithHeaderAndFooter = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Full Popover with Header and Footer</Text>
+    <Box p={50} alignItems="center">
+      <Popover
+        trigger={<Button>Open Popover</Button>}
+      >
+        <PopoverHeader>Confirmation</PopoverHeader>
+        <PopoverBody>
+          <Text>Are you sure you want to proceed with this action?</Text>
+        </PopoverBody>
+        <PopoverFooter>
+          <Button size="sm" variant="ghost">Cancel</Button>
+          <Button size="sm">Confirm</Button>
+        </PopoverFooter>
+      </Popover>
+    </Box>
+  </VStack>
+);
+
+export const HeaderAndFooter: Story = {
+  render: () => <WithHeaderAndFooter />,
+};
+
+const FormPopover = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Popover with Form</Text>
+    <Box p={50} alignItems="center">
+      <Popover
+        trigger={<Button>Edit</Button>}
+      >
+        <PopoverHeader>Edit Name</PopoverHeader>
+        <PopoverBody>
+          <VStack space={spacing.md}>
+            <Input label="First Name" placeholder="Enter first name" />
+            <Input label="Last Name" placeholder="Enter last name" />
+          </VStack>
+        </PopoverBody>
+        <PopoverFooter>
+          <Button size="sm" variant="ghost">Cancel</Button>
+          <Button size="sm">Save</Button>
+        </PopoverFooter>
+      </Popover>
+    </Box>
+  </VStack>
+);
+
+export const WithForm: Story = {
+  render: () => <FormPopover />,
+};
+
+const InfoPopover = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Information Popover</Text>
+    <HStack space={spacing.sm} alignItems="center">
+      <Text>What is this?</Text>
+      <Popover
+        trigger={
+          <Box
+            w={20}
+            h={20}
+            rounded="full"
+            bg={colors.brand.blue + '20'}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text variant="small">?</Text>
+          </Box>
+        }
+        placement="right"
+      >
+        <PopoverBody>
+          <VStack space={spacing.sm}>
+            <Text weight="semiBold">Information</Text>
+            <Text variant="small" color={colors.text.secondary}>
+              This is additional information that helps explain the feature.
+              Click anywhere outside to close.
+            </Text>
+          </VStack>
+        </PopoverBody>
+      </Popover>
+    </HStack>
+  </VStack>
+);
+
+export const Info: Story = {
+  render: () => <InfoPopover />,
+};
+
+const ProfilePopover = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Profile Card Popover</Text>
+    <Box p={50}>
+      <Popover
+        trigger={
+          <HStack space={spacing.sm} alignItems="center">
+            <Box
+              w={32}
+              h={32}
+              rounded="full"
+              bg={colors.brand.blue + '30'}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text weight="semiBold">JD</Text>
+            </Box>
+            <Text>John Doe</Text>
+          </HStack>
+        }
+      >
+        <PopoverBody>
+          <VStack space={spacing.md}>
+            <HStack space={spacing.md} alignItems="center">
+              <Box
+                w={48}
+                h={48}
+                rounded="full"
+                bg={colors.brand.blue + '30'}
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Text weight="bold">JD</Text>
+              </Box>
+              <VStack space={spacing.xs}>
+                <Text weight="semiBold">John Doe</Text>
+                <Text variant="small" color={colors.text.secondary}>john@example.com</Text>
+              </VStack>
+            </HStack>
+            <Box h={1} bg={colors.border.default} />
+            <VStack space={spacing.xs}>
+              <Text variant="small" color={colors.text.secondary}>Role: Senior Developer</Text>
+              <Text variant="small" color={colors.text.secondary}>Location: San Francisco</Text>
+              <Text variant="small" color={colors.text.secondary}>Joined: Jan 2024</Text>
+            </VStack>
+          </VStack>
+        </PopoverBody>
+        <PopoverFooter>
+          <Button size="sm" variant="ghost">View Profile</Button>
+          <Button size="sm" variant="secondary">Message</Button>
+        </PopoverFooter>
+      </Popover>
+    </Box>
+  </VStack>
+);
+
+export const Profile: Story = {
+  render: () => <ProfilePopover />,
+};
+
+const ControlledPopover = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Controlled Popover</Text>
+      <HStack space={spacing.sm}>
+        <Button onPress={() => setIsOpen(true)}>Open Programmatically</Button>
+        <Button variant="secondary" onPress={() => setIsOpen(false)}>Close Programmatically</Button>
+      </HStack>
+      <Box p={50} alignItems="center">
+        <Popover
+          trigger={<Button variant="outline">Click to Toggle</Button>}
+          isOpen={isOpen}
+          onOpen={() => setIsOpen(true)}
+          onClose={() => setIsOpen(false)}
+        >
+          <PopoverBody>
+            <Text>This popover is controlled externally.</Text>
+          </PopoverBody>
+        </Popover>
+      </Box>
+    </VStack>
+  );
+};
+
+export const Controlled: Story = {
+  render: () => <ControlledPopover />,
+};
+
+const DatePickerPopover = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Date Selection Popover</Text>
+    <Box p={50}>
+      <Popover
+        trigger={
+          <Button variant="outline">Select Date</Button>
+        }
+      >
+        <PopoverHeader>Select Date</PopoverHeader>
+        <PopoverBody>
+          <VStack space={spacing.md}>
+            <Text variant="small" color={colors.text.secondary} align="center">January 2024</Text>
+            <HStack justifyContent="space-around">
+              {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
+                <Box key={i} w={30} alignItems="center">
+                  <Text variant="small" color={colors.text.secondary}>{day}</Text>
+                </Box>
+              ))}
+            </HStack>
+            {[[null, 1, 2, 3, 4, 5, 6], [7, 8, 9, 10, 11, 12, 13]].map((week, i) => (
+              <HStack key={i} justifyContent="space-around">
+                {week.map((day, j) => (
+                  <Box
+                    key={j}
+                    w={30}
+                    h={30}
+                    rounded="full"
+                    bg={day === 10 ? colors.brand.blue : 'transparent'}
+                    alignItems="center"
+                    justifyContent="center"
+                  >
+                    {day && (
+                      <Text variant="small" color={day === 10 ? 'white' : undefined}>
+                        {day}
+                      </Text>
+                    )}
+                  </Box>
+                ))}
+              </HStack>
+            ))}
+          </VStack>
+        </PopoverBody>
+      </Popover>
+    </Box>
+  </VStack>
+);
+
+export const DatePicker: Story = {
+  render: () => <DatePickerPopover />,
+};
+

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,315 @@
+/**
+ * Popover Component
+ * Floating content panel anchored to a trigger
+ */
+
+import React, { forwardRef, useState, useRef, useCallback } from 'react';
+import {
+  View,
+  ViewProps,
+  Pressable,
+  Text,
+  Modal,
+  Animated,
+  LayoutRectangle,
+  Dimensions,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { colors, spacing, borderRadius, typography, elevation } from '../../styles/tokens';
+
+const getScreenDimensions = () => Dimensions.get('window');
+
+export interface PopoverProps extends ViewProps {
+  /** Popover trigger element */
+  trigger: React.ReactElement;
+  /** Is open (controlled) */
+  isOpen?: boolean;
+  /** On open handler */
+  onOpen?: () => void;
+  /** On close handler */
+  onClose?: () => void;
+  /** Placement */
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /** Close on click outside */
+  closeOnBlur?: boolean;
+  /** Show arrow */
+  hasArrow?: boolean;
+}
+
+export const Popover = forwardRef<View, PopoverProps>(
+  (
+    {
+      style,
+      trigger,
+      isOpen: controlledIsOpen,
+      onOpen,
+      onClose,
+      placement = 'bottom',
+      closeOnBlur = true,
+      hasArrow = true,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalIsOpen, setInternalIsOpen] = 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 isControlled = controlledIsOpen !== undefined;
+    const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+
+    // Measure trigger position when opening
+    const measureTrigger = useCallback((): Promise<LayoutRectangle> => {
+      return new Promise((resolve) => {
+        if (Platform.OS === 'web') {
+          // On web, try to access DOM element directly
+          const node = triggerRef.current as any;
+          if (node) {
+            // In React Native Web, the ref is the DOM element
+            try {
+              const rect = node.getBoundingClientRect?.() || 
+                           node._nativeTag?.getBoundingClientRect?.();
+              if (rect) {
+                resolve({ x: rect.left, y: rect.top, width: rect.width, height: rect.height });
+                return;
+              }
+            } catch (e) {
+              // Fall through to measure
+            }
+            
+            // Fallback to measure
+            node.measure?.((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+              resolve({ x: pageX || 0, y: pageY || 0, width: width || 100, height: height || 40 });
+            });
+            
+            // If measure doesn't callback, resolve with defaults after timeout
+            setTimeout(() => resolve({ x: 0, y: 0, width: 100, height: 40 }), 100);
+          } else {
+            resolve({ x: 0, y: 0, width: 100, height: 40 });
+          }
+        } else {
+          triggerRef.current?.measureInWindow((x, y, width, height) => {
+            resolve({ x: x || 0, y: y || 0, width: width || 100, height: height || 40 });
+          });
+        }
+      });
+    }, []);
+
+    const handleOpen = useCallback(() => {
+      measureTrigger().then((layout) => {
+        setTriggerLayout(layout);
+        
+        if (!isControlled) {
+          setInternalIsOpen(true);
+        }
+        onOpen?.();
+
+        Animated.parallel([
+          Animated.timing(opacityAnim, {
+            toValue: 1,
+            duration: 150,
+            useNativeDriver: true,
+          }),
+          Animated.spring(scaleAnim, {
+            toValue: 1,
+            useNativeDriver: true,
+            tension: 100,
+            friction: 8,
+          }),
+        ]).start();
+      });
+    }, [isControlled, onOpen, measureTrigger]);
+
+    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(() => {
+        if (!isControlled) {
+          setInternalIsOpen(false);
+        }
+        onClose?.();
+      });
+    }, [isControlled, onClose]);
+
+    const handleToggle = () => {
+      if (isOpen) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
+    };
+
+    const getPopoverPosition = () => {
+      if (!triggerLayout) return {};
+
+      const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = getScreenDimensions();
+      const offset = 8;
+
+      switch (placement) {
+        case 'top':
+          return {
+            bottom: SCREEN_HEIGHT - triggerLayout.y + offset,
+            left: triggerLayout.x,
+            minWidth: triggerLayout.width,
+          };
+        case 'bottom':
+          return {
+            top: triggerLayout.y + triggerLayout.height + offset,
+            left: triggerLayout.x,
+            minWidth: triggerLayout.width,
+          };
+        case 'left':
+          return {
+            top: triggerLayout.y,
+            right: SCREEN_WIDTH - triggerLayout.x + offset,
+          };
+        case 'right':
+          return {
+            top: triggerLayout.y,
+            left: triggerLayout.x + triggerLayout.width + offset,
+          };
+        default:
+          return {};
+      }
+    };
+
+    // 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 toggle popover
+        handleToggle();
+      },
+    } 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={closeOnBlur ? handleClose : undefined}
+          >
+            <Animated.View
+              style={[
+                styles.popover,
+                getPopoverPosition(),
+                {
+                  opacity: opacityAnim,
+                  transform: [{ scale: scaleAnim }],
+                },
+                style,
+              ]}
+            >
+              <Pressable>
+                {children}
+              </Pressable>
+            </Animated.View>
+          </Pressable>
+        </Modal>
+      </View>
+    );
+  }
+);
+
+Popover.displayName = 'Popover';
+
+export interface PopoverHeaderProps extends ViewProps {}
+export interface PopoverBodyProps extends ViewProps {}
+export interface PopoverFooterProps extends ViewProps {}
+
+export const PopoverHeader = forwardRef<View, PopoverHeaderProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.header, style]} {...props}>
+        {typeof children === 'string' ? (
+          <Text style={styles.headerText}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+
+PopoverHeader.displayName = 'PopoverHeader';
+
+export const PopoverBody = forwardRef<View, PopoverBodyProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.body, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+PopoverBody.displayName = 'PopoverBody';
+
+export const PopoverFooter = forwardRef<View, PopoverFooterProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.footer, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+PopoverFooter.displayName = 'PopoverFooter';
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+  },
+  popover: {
+    position: 'absolute',
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+    minWidth: 200,
+    maxWidth: 320,
+    ...elevation['30'],
+  },
+  header: {
+    padding: spacing['3x'],
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+  headerText: {
+    fontSize: typography.fontSize.body,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+  body: {
+    padding: spacing['3x'],
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    padding: spacing['3x'],
+    borderTopWidth: 1,
+    borderTopColor: colors.border.disabled,
+    gap: spacing['2x'],
+  },
+});

package/src/components/Popover/index.ts

@@ -0,0 +1,11 @@
+export {
+  Popover,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter,
+  type PopoverProps,
+  type PopoverHeaderProps,
+  type PopoverBodyProps,
+  type PopoverFooterProps,
+} from './Popover';
+