@urbint/cl 1.0.1

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,354 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+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 Tooltip> = {
+  title: 'Overlay/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+    isDisabled: { control: 'boolean' },
+    hasArrow: { control: 'boolean' },
+    openDelay: { control: 'number' },
+    closeDelay: { control: 'number' },
+  },
+  args: {
+    label: 'Tooltip text',
+    placement: 'top',
+    isDisabled: false,
+    hasArrow: true,
+    openDelay: 0,
+    closeDelay: 0,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  render: () => (
+    <Box p={50} alignItems="center">
+      <Tooltip label="This is a tooltip">
+        <Button>Hover me</Button>
+      </Tooltip>
+    </Box>
+  ),
+};
+
+const PlacementDemo = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Tooltip Placement</Text>
+    <Box p={100} alignItems="center">
+      <VStack space={spacing.xl} alignItems="center">
+        <Tooltip label="I appear on top" placement="top">
+          <Button size="sm">Top</Button>
+        </Tooltip>
+        
+        <HStack space={100}>
+          <Tooltip label="I appear on the left" placement="left">
+            <Button size="sm">Left</Button>
+          </Tooltip>
+          
+          <Tooltip label="I appear on the right" placement="right">
+            <Button size="sm">Right</Button>
+          </Tooltip>
+        </HStack>
+        
+        <Tooltip label="I appear on bottom" placement="bottom">
+          <Button size="sm">Bottom</Button>
+        </Tooltip>
+      </VStack>
+    </Box>
+  </VStack>
+);
+
+export const Placement: Story = {
+  render: () => <PlacementDemo />,
+};
+
+const WithDelays = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Tooltip with Delays</Text>
+    <HStack space={spacing.lg} wrap>
+      <Tooltip label="No delay" openDelay={0}>
+        <Button variant="outline" size="sm">Instant</Button>
+      </Tooltip>
+      <Tooltip label="Opens after 500ms" openDelay={500}>
+        <Button variant="outline" size="sm">500ms delay</Button>
+      </Tooltip>
+      <Tooltip label="Opens after 1000ms" openDelay={1000}>
+        <Button variant="outline" size="sm">1s delay</Button>
+      </Tooltip>
+    </HStack>
+  </VStack>
+);
+
+export const Delays: Story = {
+  render: () => <WithDelays />,
+};
+
+const DisabledTooltip = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Disabled Tooltip</Text>
+    <HStack space={spacing.lg}>
+      <Tooltip label="This tooltip is enabled">
+        <Button size="sm">Enabled</Button>
+      </Tooltip>
+      <Tooltip label="You won't see this" isDisabled>
+        <Button size="sm" variant="secondary">Disabled</Button>
+      </Tooltip>
+    </HStack>
+  </VStack>
+);
+
+export const Disabled: Story = {
+  render: () => <DisabledTooltip />,
+};
+
+const IconTooltips = () => {
+  const InfoIcon = (
+    <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M12 16v-4m0-4h.01M22 12a10 10 0 11-20 0 10 10 0 0120 0z"
+        stroke={colors.text.secondary}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+
+  const EditIcon = (
+    <Svg width={20} height={20} 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 DeleteIcon = (
+    <Svg width={20} height={20} 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.feedback.error.content}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Icon Button Tooltips</Text>
+      <HStack space={spacing.sm}>
+        <Tooltip label="More information">
+          <Box p={spacing.sm} rounded="md" bg={colors.background.secondary}>
+            {InfoIcon}
+          </Box>
+        </Tooltip>
+        <Tooltip label="Edit item">
+          <Box p={spacing.sm} rounded="md" bg={colors.background.secondary}>
+            {EditIcon}
+          </Box>
+        </Tooltip>
+        <Tooltip label="Delete item">
+          <Box p={spacing.sm} rounded="md" bg={colors.feedback.error.background}>
+            {DeleteIcon}
+          </Box>
+        </Tooltip>
+      </HStack>
+    </VStack>
+  );
+};
+
+export const Icons: Story = {
+  render: () => <IconTooltips />,
+};
+
+const ToolbarTooltips = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Toolbar with Tooltips</Text>
+    <Box p={spacing.md} bg={colors.background.secondary} rounded="lg">
+      <HStack space={spacing.xs}>
+        <Tooltip label="Bold (Ctrl+B)">
+          <Box p={spacing.sm} rounded="md" bg={colors.border.default}>
+            <Text weight="bold">B</Text>
+          </Box>
+        </Tooltip>
+        <Tooltip label="Italic (Ctrl+I)">
+          <Box p={spacing.sm} rounded="md" bg={colors.border.default}>
+            <Text style={{ fontStyle: 'italic' }}>I</Text>
+          </Box>
+        </Tooltip>
+        <Tooltip label="Underline (Ctrl+U)">
+          <Box p={spacing.sm} rounded="md" bg={colors.border.default}>
+            <Text style={{ textDecorationLine: 'underline' }}>U</Text>
+          </Box>
+        </Tooltip>
+        <Box w={1} h={24} bg={colors.border.subtle} mx={spacing.xs} />
+        <Tooltip label="Align Left">
+          <Box p={spacing.sm} rounded="md" bg={colors.border.default}>
+            <Text>⫷</Text>
+          </Box>
+        </Tooltip>
+        <Tooltip label="Align Center">
+          <Box p={spacing.sm} rounded="md" bg={colors.border.default}>
+            <Text>≡</Text>
+          </Box>
+        </Tooltip>
+        <Tooltip label="Align Right">
+          <Box p={spacing.sm} rounded="md" bg={colors.border.default}>
+            <Text>⫸</Text>
+          </Box>
+        </Tooltip>
+      </HStack>
+    </Box>
+  </VStack>
+);
+
+export const Toolbar: Story = {
+  render: () => <ToolbarTooltips />,
+};
+
+const FormFieldTooltips = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Form Field Help Tooltips</Text>
+    <VStack space={spacing.md}>
+      <HStack space={spacing.sm} alignItems="center">
+        <Text>Username</Text>
+        <Tooltip label="Your username must be unique and contain only letters, numbers, and underscores">
+          <Box
+            w={16}
+            h={16}
+            rounded="full"
+            bg={colors.brand.blue + '20'}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text variant="small">?</Text>
+          </Box>
+        </Tooltip>
+      </HStack>
+      <HStack space={spacing.sm} alignItems="center">
+        <Text>Password</Text>
+        <Tooltip label="Password must be at least 8 characters with one uppercase, one lowercase, and one number">
+          <Box
+            w={16}
+            h={16}
+            rounded="full"
+            bg={colors.brand.blue + '20'}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text variant="small">?</Text>
+          </Box>
+        </Tooltip>
+      </HStack>
+    </VStack>
+  </VStack>
+);
+
+export const FormHelp: Story = {
+  render: () => <FormFieldTooltips />,
+};
+
+const StatusTooltips = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Status Indicator Tooltips</Text>
+    <HStack space={spacing.lg}>
+      <Tooltip label="Online - Active now">
+        <HStack space={spacing.sm} alignItems="center">
+          <Box w={10} h={10} rounded="full" bg={colors.feedback.success.content} />
+          <Text>User A</Text>
+        </HStack>
+      </Tooltip>
+      <Tooltip label="Away - Last seen 5 minutes ago">
+        <HStack space={spacing.sm} alignItems="center">
+          <Box w={10} h={10} rounded="full" bg={colors.feedback.warning.content} />
+          <Text>User B</Text>
+        </HStack>
+      </Tooltip>
+      <Tooltip label="Offline">
+        <HStack space={spacing.sm} alignItems="center">
+          <Box w={10} h={10} rounded="full" bg={colors.text.disabled} />
+          <Text>User C</Text>
+        </HStack>
+      </Tooltip>
+    </HStack>
+  </VStack>
+);
+
+export const Status: Story = {
+  render: () => <StatusTooltips />,
+};
+
+const LongContentTooltip = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Long Content Tooltip</Text>
+    <Box p={50}>
+      <Tooltip
+        label="This is a longer tooltip that contains more detailed information. It will wrap to multiple lines if necessary to fit within the maximum width."
+      >
+        <Button variant="outline">View details</Button>
+      </Tooltip>
+    </Box>
+  </VStack>
+);
+
+export const LongContent: Story = {
+  render: () => <LongContentTooltip />,
+};
+
+const DataTableTooltips = () => (
+  <VStack space={spacing.lg}>
+    <Text weight="semiBold">Data Table Cell Tooltips</Text>
+    <Box p={spacing.lg} bg={colors.white} rounded="lg" shadow="10">
+      <VStack space={spacing.sm}>
+        <HStack justifyContent="space-between">
+          <Text weight="semiBold">Name</Text>
+          <Text weight="semiBold">Status</Text>
+        </HStack>
+        <HStack justifyContent="space-between" py={spacing.sm}>
+          <Tooltip label="John Doe - Senior Developer">
+            <Text>John D.</Text>
+          </Tooltip>
+          <Tooltip label="Completed all assigned tasks">
+            <Box px={spacing.sm} py={spacing.xs} bg={colors.feedback.success.background} rounded="full">
+              <Text variant="small" color={colors.feedback.success.content}>Active</Text>
+            </Box>
+          </Tooltip>
+        </HStack>
+        <HStack justifyContent="space-between" py={spacing.sm}>
+          <Tooltip label="Jane Smith - Product Manager">
+            <Text>Jane S.</Text>
+          </Tooltip>
+          <Tooltip label="On vacation until Jan 20">
+            <Box px={spacing.sm} py={spacing.xs} bg={colors.feedback.warning.background} rounded="full">
+              <Text variant="small" color={colors.feedback.warning.content}>Away</Text>
+            </Box>
+          </Tooltip>
+        </HStack>
+      </VStack>
+    </Box>
+  </VStack>
+);
+
+export const DataTable: Story = {
+  render: () => <DataTableTooltips />,
+};
+

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,261 @@
+/**
+ * Tooltip Component
+ * Informational popup on hover/press
+ */
+
+import React, { forwardRef, useState, useRef, useCallback } from 'react';
+import {
+  View,
+  ViewProps,
+  Text,
+  Animated,
+  LayoutRectangle,
+  Dimensions,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { colors, spacing, borderRadius, typography, elevation } from '../../styles/tokens';
+
+const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export interface TooltipProps extends ViewProps {
+  /** Tooltip content */
+  label: string;
+  /** Tooltip trigger element */
+  children: React.ReactNode;
+  /** Placement */
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Show delay in ms */
+  openDelay?: number;
+  /** Hide delay in ms */
+  closeDelay?: number;
+  /** Has arrow */
+  hasArrow?: boolean;
+}
+
+export const Tooltip = forwardRef<View, TooltipProps>(
+  (
+    {
+      style,
+      label,
+      children,
+      placement = 'top',
+      isDisabled = false,
+      openDelay = 0,
+      closeDelay = 0,
+      hasArrow = 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 openTimeout = useRef<NodeJS.Timeout>();
+    const closeTimeout = useRef<NodeJS.Timeout>();
+
+    const show = useCallback(() => {
+      if (isDisabled) return;
+      
+      clearTimeout(closeTimeout.current);
+      
+      triggerRef.current?.measureInWindow((x, y, width, height) => {
+        setTriggerLayout({ x, y, width, height });
+        
+        openTimeout.current = setTimeout(() => {
+          setIsOpen(true);
+          Animated.timing(opacityAnim, {
+            toValue: 1,
+            duration: 150,
+            useNativeDriver: true,
+          }).start();
+        }, openDelay);
+      });
+    }, [isDisabled, openDelay]);
+
+    const hide = useCallback(() => {
+      clearTimeout(openTimeout.current);
+      
+      closeTimeout.current = setTimeout(() => {
+        Animated.timing(opacityAnim, {
+          toValue: 0,
+          duration: 100,
+          useNativeDriver: true,
+        }).start(() => {
+          setIsOpen(false);
+        });
+      }, closeDelay);
+    }, [closeDelay]);
+
+    const getTooltipPosition = () => {
+      if (!triggerLayout) return {};
+
+      const tooltipPadding = 8;
+
+      // For web with fixed positioning, we can use screen coordinates directly
+      switch (placement) {
+        case 'top':
+          return {
+            bottom: SCREEN_HEIGHT - triggerLayout.y + tooltipPadding,
+            left: triggerLayout.x,
+            width: triggerLayout.width,
+          };
+        case 'bottom':
+          return {
+            top: triggerLayout.y + triggerLayout.height + tooltipPadding,
+            left: triggerLayout.x,
+            width: triggerLayout.width,
+          };
+        case 'left':
+          return {
+            top: triggerLayout.y,
+            right: SCREEN_WIDTH - triggerLayout.x + tooltipPadding,
+          };
+        case 'right':
+          return {
+            top: triggerLayout.y,
+            left: triggerLayout.x + triggerLayout.width + tooltipPadding,
+          };
+        default:
+          return {};
+      }
+    };
+
+    const getArrowStyle = () => {
+      switch (placement) {
+        case 'top':
+          return styles.arrowBottom;
+        case 'bottom':
+          return styles.arrowTop;
+        case 'left':
+          return styles.arrowRight;
+        case 'right':
+          return styles.arrowLeft;
+        default:
+          return {};
+      }
+    };
+
+    // Clone children and inject handlers (hover for web, press for native)
+    const child = React.Children.only(children) as React.ReactElement;
+    const handlers: any = Platform.OS === 'web' 
+      ? {
+          // Web: use hover events for tooltip
+          onHoverIn: (e: any) => {
+            (child.props as any)?.onHoverIn?.(e);
+            show();
+          },
+          onHoverOut: (e: any) => {
+            (child.props as any)?.onHoverOut?.(e);
+            hide();
+          },
+        }
+      : {
+          // Native: use press events for tooltip
+          onPressIn: (e: any) => {
+            (child.props as any)?.onPressIn?.(e);
+            show();
+          },
+          onPressOut: (e: any) => {
+            (child.props as any)?.onPressOut?.(e);
+            hide();
+          },
+          onLongPress: (e: any) => {
+            (child.props as any)?.onLongPress?.(e);
+            show();
+          },
+        };
+    const childWithHandlers = React.cloneElement(child, handlers);
+
+    return (
+      <View ref={ref} {...props}>
+        <View ref={triggerRef} collapsable={false}>
+          {childWithHandlers}
+        </View>
+        {isOpen && (
+          <Animated.View
+            style={[
+              styles.tooltip,
+              getTooltipPosition(),
+              { opacity: opacityAnim },
+              style,
+            ]}
+            pointerEvents="none"
+          >
+            <Text style={styles.label}>{label}</Text>
+            {hasArrow && <View style={[styles.arrow, getArrowStyle()]} />}
+          </Animated.View>
+        )}
+      </View>
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';
+
+const styles = StyleSheet.create({
+  tooltip: {
+    position: Platform.OS === 'web' ? ('fixed' as any) : 'absolute',
+    backgroundColor: colors.brand.navy,
+    paddingVertical: spacing['2x'],
+    paddingHorizontal: spacing['3x'],
+    borderRadius: borderRadius.md,
+    maxWidth: 200,
+    zIndex: 9999,
+    ...elevation['10'],
+  },
+  label: {
+    fontSize: typography.fontSize.small,
+    color: colors.white,
+    textAlign: 'center',
+  },
+  arrow: {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    borderStyle: 'solid',
+  },
+  arrowTop: {
+    top: -6,
+    alignSelf: 'center',
+    borderLeftWidth: 6,
+    borderRightWidth: 6,
+    borderBottomWidth: 6,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: colors.brand.navy,
+  },
+  arrowBottom: {
+    bottom: -6,
+    alignSelf: 'center',
+    borderLeftWidth: 6,
+    borderRightWidth: 6,
+    borderTopWidth: 6,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: colors.brand.navy,
+  },
+  arrowLeft: {
+    left: -6,
+    alignSelf: 'center',
+    borderTopWidth: 6,
+    borderBottomWidth: 6,
+    borderRightWidth: 6,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderRightColor: colors.brand.navy,
+  },
+  arrowRight: {
+    right: -6,
+    alignSelf: 'center',
+    borderTopWidth: 6,
+    borderBottomWidth: 6,
+    borderLeftWidth: 6,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderLeftColor: colors.brand.navy,
+  },
+});

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip, type TooltipProps } from './Tooltip';
+