@idealyst/components 1.0.82 → 1.0.84

package/src/index.native.ts

@@ -7,9 +7,13 @@ export * from './Text/types';
 export { default as View } from './View';
 export * from './View/types';
 
+export { default as Pressable } from './Pressable';
+export * from './Pressable/types';
+
 export { default as Input } from './Input';
 export * from './Input/types';
 
+// New primitive components
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox/types';
 
@@ -40,8 +44,62 @@ export * from './Dialog/types';
 export { default as Popover } from './Popover';
 export * from './Popover/types';
 
-export { default as Pressable } from './Pressable';
-export * from './Pressable/types';
+export { default as ActivityIndicator } from './ActivityIndicator';
+export * from './ActivityIndicator/types';
+
+export { default as Select } from './Select';
+export * from './Select/types';
+
+export { default as Slider } from './Slider';
+export * from './Slider/types';
+
+export { default as Switch } from './Switch';
+export * from './Switch/types';
+
+export { RadioButton, RadioGroup } from './RadioButton';
+export * from './RadioButton/types';
+
+export { default as Progress } from './Progress';
+export * from './Progress/types';
+
+export { default as TextArea } from './TextArea';
+export * from './TextArea/types';
+
+export { default as TabBar } from './TabBar';
+export * from './TabBar/types';
+
+export { default as Tooltip } from './Tooltip';
+export * from './Tooltip/types';
+
+export { default as Accordion } from './Accordion';
+export * from './Accordion/types';
+
+export { List, ListItem, ListSection } from './List';
+export * from './List/types';
+
+export { default as Table } from './Table';
+export * from './Table/types';
+
+export { default as Menu } from './Menu';
+export * from './Menu/types';
+
+export { default as Image } from './Image';
+export * from './Image/types';
+
+export { default as Video } from './Video';
+export * from './Video/types';
+
+export { default as Alert } from './Alert';
+export * from './Alert/types';
+
+export { default as Skeleton, SkeletonGroup } from './Skeleton';
+export * from './Skeleton/types';
+
+export { default as Chip } from './Chip';
+export * from './Chip/types';
+
+export { default as Breadcrumb } from './Breadcrumb';
+export * from './Breadcrumb/types';
 
 export type { ButtonProps } from './Button/types';
 export type { TextProps } from './Text/types';
@@ -57,10 +115,23 @@ export type { IconProps } from './Icon/types';
 export type { SVGImageProps } from './SVGImage/types';
 export type { DialogProps } from './Dialog/types';
 export type { PopoverProps } from './Popover/types';
-export type { PressableProps } from './Pressable/types';
-
-export { appThemes, breakpoints } from './theme';
-export type { AppThemes, AppBreakpoints } from './theme';
-
-// Theme provider for managing theme state (removed - using Unistyles Runtime directly)
-// export { ThemeProvider, useTheme } from './theme/ThemeProvider'; 
+export type { ActivityIndicatorProps } from './ActivityIndicator/types';
+export type { SelectProps } from './Select/types';
+export type { SwitchProps } from './Switch/types';
+export type { RadioButtonProps, RadioGroupProps } from './RadioButton/types';
+export type { ProgressProps } from './Progress/types';
+export type { TextAreaProps } from './TextArea/types';
+export type { TabBarProps, TabBarItem } from './TabBar/types';
+export type { TooltipProps } from './Tooltip/types';
+export type { AccordionProps, AccordionItem } from './Accordion/types';
+export type { ListProps, ListItemProps, ListSectionProps } from './List/types';
+export type { TableProps, TableColumn } from './Table/types';
+export type { MenuProps, MenuItem } from './Menu/types';
+export type { ImageProps } from './Image/types';
+export type { VideoProps, VideoSource } from './Video/types';
+export type { AlertProps } from './Alert/types';
+export type { SkeletonProps, SkeletonGroupProps, SkeletonShape, SkeletonAnimation } from './Skeleton/types';
+export type { ChipProps, ChipSize, ChipIntent } from './Chip/types';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb/types';
+
+export type { AppTheme } from '@idealyst/theme'; 

package/src/index.ts

@@ -1,3 +1,5 @@
+import useMergeRefs from './hooks/useMergeRefs';
+
 export { default as Button } from './Button';
 export * from './Button/types';
 
@@ -47,6 +49,60 @@ export * from './Popover/types';
 export { default as ActivityIndicator } from './ActivityIndicator';
 export * from './ActivityIndicator/types';
 
+export { default as Select } from './Select';
+export * from './Select/types';
+
+export { default as Slider } from './Slider';
+export * from './Slider/types';
+
+export { default as Switch } from './Switch';
+export * from './Switch/types';
+
+export { RadioButton, RadioGroup } from './RadioButton';
+export * from './RadioButton/types';
+
+export { default as Progress } from './Progress';
+export * from './Progress/types';
+
+export { default as TextArea } from './TextArea';
+export * from './TextArea/types';
+
+export { default as TabBar } from './TabBar';
+export * from './TabBar/types';
+
+export { default as Tooltip } from './Tooltip';
+export * from './Tooltip/types';
+
+export { default as Accordion } from './Accordion';
+export * from './Accordion/types';
+
+export { List, ListItem, ListSection } from './List';
+export * from './List/types';
+
+export { default as Table } from './Table';
+export * from './Table/types';
+
+export { default as Menu } from './Menu';
+export * from './Menu/types';
+
+export { default as Image } from './Image';
+export * from './Image/types';
+
+export { default as Video } from './Video';
+export * from './Video/types';
+
+export { default as Alert } from './Alert';
+export * from './Alert/types';
+
+export { default as Skeleton, SkeletonGroup } from './Skeleton';
+export * from './Skeleton/types';
+
+export { default as Chip } from './Chip';
+export * from './Chip/types';
+
+export { default as Breadcrumb } from './Breadcrumb';
+export * from './Breadcrumb/types';
+
 export type { ButtonProps } from './Button/types';
 export type { TextProps } from './Text/types';
 export type { ViewProps } from './View/types';
@@ -62,6 +118,24 @@ export type { SVGImageProps } from './SVGImage/types';
 export type { DialogProps } from './Dialog/types';
 export type { PopoverProps } from './Popover/types';
 export type { ActivityIndicatorProps } from './ActivityIndicator/types';
+export type { SelectProps } from './Select/types';
+export type { SwitchProps } from './Switch/types';
+export type { RadioButtonProps, RadioGroupProps } from './RadioButton/types';
+export type { ProgressProps } from './Progress/types';
+export type { TextAreaProps } from './TextArea/types';
+export type { TabBarProps, TabBarItem } from './TabBar/types';
+export type { TooltipProps } from './Tooltip/types';
+export type { AccordionProps, AccordionItem } from './Accordion/types';
+export type { ListProps, ListItemProps, ListSectionProps } from './List/types';
+export type { TableProps, TableColumn } from './Table/types';
+export type { MenuProps, MenuItem } from './Menu/types';
+export type { ImageProps } from './Image/types';
+export type { VideoProps, VideoSource } from './Video/types';
+export type { AlertProps } from './Alert/types';
+export type { SkeletonProps, SkeletonGroupProps, SkeletonShape, SkeletonAnimation } from './Skeleton/types';
+export type { ChipProps, ChipSize, ChipIntent } from './Chip/types';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb/types';
+
+export { useMergeRefs };
 
-export { breakpoints } from '@idealyst/theme';
 export type { AppTheme } from '@idealyst/theme';

package/src/internal/BoundedModalContent.native.tsx

@@ -0,0 +1,58 @@
+import React, { ReactNode } from 'react';
+import { View, Dimensions, StyleProp, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface BoundedModalContentProps {
+  children: ReactNode;
+  top: number;
+  left: number;
+  width?: number;
+  maxHeight?: number;
+  style?: StyleProp<ViewStyle>;
+  onLayout?: (event: any) => void;
+}
+
+/**
+ * A wrapper component for modal content that automatically constrains its height
+ * to fit within screen boundaries, accounting for safe areas.
+ */
+export const BoundedModalContent: React.FC<BoundedModalContentProps> = ({
+  children,
+  top,
+  left,
+  width,
+  maxHeight = 500,
+  style,
+  onLayout,
+}) => {
+  const insets = useSafeAreaInsets();
+  const { height: windowHeight } = Dimensions.get('window');
+  const padding = 12;
+
+  // Calculate dynamic maxHeight to ensure content stays within bounds
+  // The safe area goes from the top of the window to windowHeight - insets.bottom
+  // We then subtract padding from available space for visual breathing room
+  const bottomSafeEdge = windowHeight - insets.bottom;
+  const bottomBound = bottomSafeEdge - padding;
+
+  // Calculate available height: from current top position to bottom boundary
+  const availableHeight = Math.max(100, bottomBound - top);
+
+  return (
+    <View
+      style={[
+        {
+          position: 'absolute',
+          top,
+          left,
+          ...(width && { width }),
+          maxHeight: availableHeight,
+        },
+        style,
+      ]}
+      onLayout={onLayout}
+    >
+      {children}
+    </View>
+  );
+};

package/src/internal/PositionedPortal.tsx

@@ -0,0 +1,254 @@
+import React, { useRef, useState, useEffect, useLayoutEffect, useCallback, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+export type Placement =
+  | 'top' | 'top-start' | 'top-end'
+  | 'bottom' | 'bottom-start' | 'bottom-end'
+  | 'left' | 'left-start' | 'left-end'
+  | 'right' | 'right-start' | 'right-end';
+
+interface PositionedPortalProps {
+  open: boolean;
+  anchor: React.RefObject<HTMLElement>;
+  children: ReactNode;
+  placement?: Placement;
+  offset?: number;
+  onClickOutside?: () => void;
+  onEscapeKey?: () => void;
+  matchWidth?: boolean;
+  zIndex?: number;
+}
+
+interface Position {
+  top: number;
+  left: number;
+  width?: number;
+}
+
+const calculatePosition = (
+  anchorRect: DOMRect,
+  contentSize: { width: number; height: number },
+  placement: Placement,
+  offset: number,
+  matchWidth: boolean
+): Position => {
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+  };
+
+  let position: Position = { top: 0, left: 0 };
+
+  // Calculate initial position based on placement
+  switch (placement) {
+    case 'top':
+      position = {
+        top: anchorRect.top + viewport.scrollY - contentSize.height - offset,
+        left: anchorRect.left + viewport.scrollX + anchorRect.width / 2 - contentSize.width / 2,
+      };
+      break;
+    case 'top-start':
+      position = {
+        top: anchorRect.top + viewport.scrollY - contentSize.height - offset,
+        left: anchorRect.left + viewport.scrollX,
+      };
+      break;
+    case 'top-end':
+      position = {
+        top: anchorRect.top + viewport.scrollY - contentSize.height - offset,
+        left: anchorRect.right + viewport.scrollX - contentSize.width,
+      };
+      break;
+    case 'bottom':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY + offset,
+        left: anchorRect.left + viewport.scrollX + anchorRect.width / 2 - contentSize.width / 2,
+      };
+      break;
+    case 'bottom-start':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY + offset,
+        left: anchorRect.left + viewport.scrollX,
+      };
+      break;
+    case 'bottom-end':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY + offset,
+        left: anchorRect.right + viewport.scrollX - contentSize.width,
+      };
+      break;
+    case 'left':
+      position = {
+        top: anchorRect.top + viewport.scrollY + anchorRect.height / 2 - contentSize.height / 2,
+        left: anchorRect.left + viewport.scrollX - contentSize.width - offset,
+      };
+      break;
+    case 'left-start':
+      position = {
+        top: anchorRect.top + viewport.scrollY,
+        left: anchorRect.left + viewport.scrollX - contentSize.width - offset,
+      };
+      break;
+    case 'left-end':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY - contentSize.height,
+        left: anchorRect.left + viewport.scrollX - contentSize.width - offset,
+      };
+      break;
+    case 'right':
+      position = {
+        top: anchorRect.top + viewport.scrollY + anchorRect.height / 2 - contentSize.height / 2,
+        left: anchorRect.right + viewport.scrollX + offset,
+      };
+      break;
+    case 'right-start':
+      position = {
+        top: anchorRect.top + viewport.scrollY,
+        left: anchorRect.right + viewport.scrollX + offset,
+      };
+      break;
+    case 'right-end':
+      position = {
+        top: anchorRect.bottom + viewport.scrollY - contentSize.height,
+        left: anchorRect.right + viewport.scrollX + offset,
+      };
+      break;
+  }
+
+  // Match anchor width if requested
+  if (matchWidth) {
+    position.width = anchorRect.width;
+  }
+
+  // Constrain to viewport
+  const padding = 8;
+  position.left = Math.max(padding, Math.min(position.left, viewport.width - contentSize.width - padding));
+  position.top = Math.max(padding, Math.min(position.top, viewport.height + viewport.scrollY - contentSize.height - padding));
+
+  return position;
+};
+
+export const PositionedPortal: React.FC<PositionedPortalProps> = ({
+  open,
+  anchor,
+  children,
+  placement = 'bottom-start',
+  offset = 4,
+  onClickOutside,
+  onEscapeKey,
+  matchWidth = false,
+  zIndex = 1000,
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<Position>({ top: 0, left: 0 });
+  const [isPositioned, setIsPositioned] = useState(false);
+
+  // Calculate position
+  const updatePosition = useCallback(() => {
+    if (!contentRef.current || !anchor.current) {
+      return;
+    }
+
+    const anchorRect = anchor.current.getBoundingClientRect();
+    const contentRect = contentRef.current.getBoundingClientRect();
+
+    // Use actual measured size from the DOM
+    const newPosition = calculatePosition(
+      anchorRect,
+      { width: contentRect.width, height: contentRect.height },
+      placement,
+      offset,
+      matchWidth
+    );
+
+    setPosition(newPosition);
+    setIsPositioned(true);
+  }, [anchor, placement, offset, matchWidth]);
+
+  // Position after DOM is ready
+  useLayoutEffect(() => {
+    if (open) {
+      // Use requestAnimationFrame to ensure ref is attached and layout is complete
+      const rafId = requestAnimationFrame(() => {
+        if (contentRef.current && anchor.current) {
+          updatePosition();
+        }
+      });
+      return () => cancelAnimationFrame(rafId);
+    } else {
+      setIsPositioned(false);
+    }
+  }, [open, updatePosition]);
+
+  // Update position on scroll/resize
+  useEffect(() => {
+    if (!open) return;
+
+    updatePosition();
+
+    const handleUpdate = () => updatePosition();
+    window.addEventListener('resize', handleUpdate);
+    window.addEventListener('scroll', handleUpdate, true);
+
+    return () => {
+      window.removeEventListener('resize', handleUpdate);
+      window.removeEventListener('scroll', handleUpdate, true);
+    };
+  }, [open, updatePosition]);
+
+  // Handle escape key
+  useEffect(() => {
+    if (!open || !onEscapeKey) return;
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onEscapeKey();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [open, onEscapeKey]);
+
+  // Handle click outside
+  useEffect(() => {
+    if (!open || !onClickOutside) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+
+      if (
+        contentRef.current && !contentRef.current.contains(target) &&
+        anchor.current && !anchor.current.contains(target)
+      ) {
+        onClickOutside();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () => document.removeEventListener('mousedown', handleClickOutside, true);
+  }, [open, onClickOutside, anchor]);
+
+  if (!open) return null;
+
+  const content = (
+    <div
+      ref={contentRef}
+      style={{
+        position: 'fixed',
+        top: position.top,
+        left: position.left,
+        width: position.width,
+        zIndex,
+        opacity: isPositioned ? 1 : 0,
+        pointerEvents: isPositioned ? 'auto' : 'none',
+      }}
+    >
+      {children}
+    </div>
+  );
+
+  return createPortal(content, document.body);
+};

package/src/internal/SafeAreaDebugOverlay.native.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { View, Text, Dimensions, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface SafeAreaDebugOverlayProps {
+  visible?: boolean;
+}
+
+export const SafeAreaDebugOverlay: React.FC<SafeAreaDebugOverlayProps> = ({ visible = true }) => {
+  const insets = useSafeAreaInsets();
+  const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
+  const padding = 12;
+
+  if (!visible) return null;
+
+  // Calculate safe area bounds (system-defined safe zones)
+  // Allow overlap with header at top (lenient), but respect system UI at bottom
+  const topSafeEdge = 0; // Allow header overlap
+  const leftSafeEdge = insets.left;
+  const rightSafeEdge = windowWidth - insets.right;
+  const bottomSafeEdge = windowHeight - insets.bottom;
+
+  // Calculate content bounds (safe area with padding for visual comfort)
+  const topBound = padding; // Start from top with just padding
+  const leftBound = leftSafeEdge + padding;
+  const rightBound = rightSafeEdge - padding;
+  const bottomBound = bottomSafeEdge - padding;
+
+  const safeWidth = rightBound - leftBound;
+  const safeHeight = windowHeight - insets.bottom - insets.top - padding * 2;
+
+  return (
+    <View style={styles.container} pointerEvents="none">
+      {/* Top unsafe area (status bar, notch) */}
+      <View
+        style={[
+          styles.safeAreaIndicator,
+          {
+            top: 0,
+            left: 0,
+            width: windowWidth,
+            height: topSafeEdge,
+            backgroundColor: 'rgba(255, 0, 0, 0.2)',
+          },
+        ]}
+      >
+        <Text style={styles.label}>System UI: {topSafeEdge.toFixed(0)}px</Text>
+      </View>
+
+      {/* Bottom unsafe area (gesture bar, home indicator) */}
+      <View
+        style={[
+          styles.safeAreaIndicator,
+          {
+            top: bottomSafeEdge,
+            left: 0,
+            width: windowWidth,
+            height: windowHeight - bottomSafeEdge,
+            backgroundColor: 'rgba(255, 0, 0, 0.2)',
+          },
+        ]}
+      >
+        <Text style={styles.label}>Gesture Bar: {(windowHeight - bottomSafeEdge).toFixed(0)}px</Text>
+      </View>
+
+      {/* Left unsafe area */}
+      <View
+        style={[
+          styles.safeAreaIndicator,
+          {
+            top: topSafeEdge,
+            left: 0,
+            width: leftSafeEdge,
+            height: bottomSafeEdge - topSafeEdge,
+            backgroundColor: 'rgba(255, 0, 0, 0.2)',
+          },
+        ]}
+      >
+        <Text style={[styles.label, styles.rotatedLabel]}>L: {leftSafeEdge.toFixed(0)}px</Text>
+      </View>
+
+      {/* Right unsafe area */}
+      <View
+        style={[
+          styles.safeAreaIndicator,
+          {
+            top: topSafeEdge,
+            left: rightSafeEdge,
+            width: windowWidth - rightSafeEdge,
+            height: bottomSafeEdge - topSafeEdge,
+            backgroundColor: 'rgba(255, 0, 0, 0.2)',
+          },
+        ]}
+      >
+        <Text style={[styles.label, styles.rotatedLabel]}>R: {(windowWidth - rightSafeEdge).toFixed(0)}px</Text>
+      </View>
+
+      {/* Safe area border outline */}
+      <View
+        style={[
+          styles.safeAreaBorder,
+          {
+            top: topBound,
+            left: leftBound,
+            width: safeWidth,
+            height: safeHeight,
+          },
+        ]}
+      />
+
+      {/* Info panel */}
+      <View style={styles.infoPanel}>
+        <Text style={styles.infoText}>Window: {windowWidth.toFixed(0)}x{windowHeight.toFixed(0)}</Text>
+        <Text style={styles.infoText}>Safe Area: {(rightSafeEdge - leftSafeEdge).toFixed(0)}x{(bottomSafeEdge - topSafeEdge).toFixed(0)}</Text>
+        <Text style={styles.infoText}>Content: {safeWidth.toFixed(0)}x{safeHeight.toFixed(0)}</Text>
+        <Text style={styles.infoText}>Insets: T:{insets.top} R:{insets.right} B:{insets.bottom} L:{insets.left}</Text>
+        <Text style={styles.infoText}>Safe: T:{topSafeEdge} B:{bottomSafeEdge.toFixed(0)}</Text>
+        <Text style={styles.infoText}>Bounds: T:{topBound.toFixed(0)} B:{bottomBound.toFixed(0)}</Text>
+        <Text style={styles.infoText}>Padding: {padding}px</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999,
+  },
+  safeAreaIndicator: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  safeAreaBorder: {
+    position: 'absolute',
+    borderWidth: 2,
+    borderColor: 'rgba(0, 255, 0, 0.8)',
+    borderStyle: 'dashed',
+  },
+  label: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  rotatedLabel: {
+    transform: [{ rotate: '90deg' }],
+  },
+  infoPanel: {
+    position: 'absolute',
+    top: 50,
+    right: 10,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    padding: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(0, 255, 0, 0.8)',
+  },
+  infoText: {
+    color: '#fff',
+    fontSize: 11,
+    fontFamily: 'monospace',
+    marginBottom: 2,
+  },
+});

package/src/unistyles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This file ensures that the Unistyles module augmentation from @idealyst/theme
+ * is properly loaded for all component files.
+ */
+
+import '@idealyst/theme/unistyles';