@idealyst/components 1.0.83 → 1.0.84

package/src/examples/index.ts

@@ -13,7 +13,21 @@ export { SVGImageExamples } from './SVGImageExamples';
 export { DialogExamples } from './DialogExamples';
 export { PopoverExamples } from './PopoverExamples';
 export { SelectExamples } from './SelectExamples';
+export { SliderExamples } from './SliderExamples';
+export { SwitchExamples } from './SwitchExamples';
+export { RadioButtonExamples } from './RadioButtonExamples';
+export { ProgressExamples } from './ProgressExamples';
+export { TextAreaExamples } from './TextAreaExamples';
+export { TabBarExamples } from './TabBarExamples';
+export { TooltipExamples } from './TooltipExamples';
+export { AccordionExamples } from './AccordionExamples';
+export { ListExamples } from './ListExamples';
+export { TableExamples } from './TableExamples';
+export { MenuExamples } from './MenuExamples';
+export { ImageExamples } from './ImageExamples';
+export { VideoExamples } from './VideoExamples';
+export { AlertExamples } from './AlertExamples';
+export { SkeletonExamples } from './SkeletonExamples';
+export { ChipExamples } from './ChipExamples';
+export { BreadcrumbExamples } from './BreadcrumbExamples';
 export { ThemeExtensionExamples } from './ThemeExtensionExamples';
-export { extendedThemes, } from './extendedTheme';
-export type { ExtendedColorVariant, ExtendedIntentVariant } from './extendedTheme';
-export { AllExamples } from './AllExamples'; 

package/src/hooks/useMergeRefs.ts

@@ -0,0 +1,16 @@
+/**
+ * Userful when workign with getWebProps and forwarding refs
+ * @param refs 
+ * @returns 
+ */
+export default function useMergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
+  return (value: T) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref && 'current' in ref) {
+        ref.current = value;
+      }
+    });
+  };
+}

package/src/hooks/useSmartPosition.native.ts

@@ -0,0 +1,169 @@
+import { useState, useRef, useEffect } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { calculateSmartPosition, type Placement } from '../utils/positionUtils.native';
+
+export interface UseSmartPositionOptions {
+  placement?: Placement;
+  offset?: number;
+  maxHeight?: number;
+  matchWidth?: boolean;
+}
+
+export interface SmartPosition {
+  top: number;
+  left: number;
+  width: number;
+}
+
+export interface SmartSize {
+  width: number;
+  height: number;
+}
+
+export interface UseSmartPositionReturn {
+  position: SmartPosition;
+  size: SmartSize;
+  isPositioned: boolean;
+  anchorRef: React.MutableRefObject<any>;
+  measureAndPosition: () => void;
+  handleLayout: (event: any) => void;
+  reset: () => void;
+}
+
+/**
+ * Hook for smart positioning of modals/dropdowns with automatic flip detection
+ * and stable measurement-based positioning.
+ *
+ * This hook handles the complex two-phase rendering pattern:
+ * 1. Render invisible at initial position
+ * 2. Measure actual content size
+ * 3. Calculate final position based on measured size
+ * 4. Show once positioned and measurements are stable
+ */
+export const useSmartPosition = ({
+  placement = 'bottom-start',
+  offset = 8,
+  maxHeight = 300,
+  matchWidth = false,
+}: UseSmartPositionOptions = {}): UseSmartPositionReturn => {
+  const [position, setPosition] = useState<SmartPosition>({ top: 0, left: 0, width: 0 });
+  const [size, setSize] = useState<SmartSize>({ width: 0, height: 0 });
+  const [isPositioned, setIsPositioned] = useState(false);
+
+  const anchorRef = useRef<any>(null);
+  const anchorMeasurements = useRef<{ x: number; y: number; width: number; height: number } | null>(null);
+  const previousHeightRef = useRef<number>(0);
+  const rafRef = useRef<any | null>(null);
+  const insets = useSafeAreaInsets();
+
+  // Calculate position based on anchor and content measurements
+  const calculatePosition = (x: number, y: number, width: number, height: number) => {
+    // For flip detection, use maxHeight to properly detect insufficient space
+    // But once we have a measured height, use that for tighter positioning
+    let heightForPositioning = maxHeight;
+
+    if (size.height > 0) {
+      // We have a measured height - use it if it's less than maxHeight
+      heightForPositioning = Math.min(size.height, maxHeight);
+    }
+
+    const desiredSize = {
+      width: size.width,
+      height: heightForPositioning
+    };
+
+    // Calculate position with flip detection
+    const calculatedPosition = calculateSmartPosition(
+      { x, y, width, height },
+      desiredSize,
+      placement,
+      offset,
+      matchWidth,
+      insets
+    );
+
+    setPosition({
+      top: calculatedPosition.top,
+      left: calculatedPosition.left,
+      width: calculatedPosition.width || width,
+    });
+  };
+
+  // Recalculate position when size changes
+  useEffect(() => {
+    if (anchorMeasurements.current && size.width > 0 && size.height > 0) {
+      const { x, y, width, height } = anchorMeasurements.current;
+      calculatePosition(x, y, width, height);
+
+      // Cancel any pending RAF
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+
+      // Wait for next frame to allow layout to settle before showing
+      rafRef.current = setTimeout(() => {
+          setIsPositioned(true);
+          rafRef.current = null;
+      }, 20)
+    }
+
+    return () => {
+      if (rafRef.current !== null) {
+        clearTimeout(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [size]);
+
+  // Measure anchor and set initial position
+  const measureAndPosition = () => {
+    anchorRef.current?.measureInWindow((x: number, y: number, width: number, height: number) => {
+      // Store anchor measurements for potential recalculation
+      anchorMeasurements.current = { x, y, width, height };
+
+      // Set initial position (will be adjusted after measurement)
+      setPosition({ top: y + height + offset, left: x, width });
+      setIsPositioned(false);
+      previousHeightRef.current = 0;
+    });
+  };
+
+  // Handle layout measurement from content
+  const handleLayout = (event: any) => {
+    const { width, height } = event.nativeEvent.layout;
+
+    if (__DEV__) {
+      console.log('[useSmartPosition] onLayout:', { width, height, currentSize: size, isPositioned });
+    }
+
+    // Only update if size has changed significantly
+    if (Math.abs(width - size.width) > 1 || Math.abs(height - size.height) > 1) {
+      if (__DEV__) {
+        console.log('[useSmartPosition] Size changed, updating');
+      }
+      previousHeightRef.current = size.height;
+      setSize({ width, height });
+    }
+  };
+
+  // Reset state (call when closing modal)
+  const reset = () => {
+    if (rafRef.current !== null) {
+      clearTimeout(rafRef.current);
+      rafRef.current = null;
+    }
+    setIsPositioned(false);
+    setSize({ width: 0, height: 0 });
+    previousHeightRef.current = 0;
+  };
+
+  return {
+    position,
+    size,
+    isPositioned,
+    anchorRef,
+    measureAndPosition,
+    handleLayout,
+    reset,
+  };
+};

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';
 
@@ -50,6 +52,57 @@ 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';
@@ -66,6 +119,23 @@ 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>
+  );
+};