@idealyst/components 1.0.82 → 1.0.84

package/src/examples/TooltipExamples.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Screen, View, Text, Button } from '@idealyst/components';
+import Tooltip from '../Tooltip';
+
+export const TooltipExamples: React.FC = () => {
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Tooltip Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Tooltip</Text>
+        <Tooltip content="This is a tooltip">
+          <Button type="outlined">Hover over me</Button>
+        </Tooltip>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Placements</Text>
+        <View spacing="sm" style={{ alignItems: 'center' }}>
+          <Tooltip content="Top tooltip" placement="top">
+            <Button type="outlined">Top</Button>
+          </Tooltip>
+          <View style={{ flexDirection: 'row', gap: 16 }}>
+            <Tooltip content="Left tooltip" placement="left">
+              <Button type="outlined">Left</Button>
+            </Tooltip>
+            <Tooltip content="Right tooltip" placement="right">
+              <Button type="outlined">Right</Button>
+            </Tooltip>
+          </View>
+          <Tooltip content="Bottom tooltip" placement="bottom">
+            <Button type="outlined">Bottom</Button>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+          <Tooltip content="Small tooltip" size="sm">
+            <Button type="outlined" size="sm">Small</Button>
+          </Tooltip>
+          <Tooltip content="Medium tooltip" size="md">
+            <Button type="outlined" size="md">Medium</Button>
+          </Tooltip>
+          <Tooltip content="Large tooltip" size="lg">
+            <Button type="outlined" size="lg">Large</Button>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Intent Colors</Text>
+        <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+          <Tooltip content="Primary tooltip" intent="primary">
+            <Button type="contained" intent="primary">Primary</Button>
+          </Tooltip>
+          <Tooltip content="Success tooltip" intent="success">
+            <Button type="contained" intent="success">Success</Button>
+          </Tooltip>
+          <Tooltip content="Warning tooltip" intent="warning">
+            <Button type="contained" intent="warning">Warning</Button>
+          </Tooltip>
+          <Tooltip content="Error tooltip" intent="error">
+            <Button type="contained" intent="error">Error</Button>
+          </Tooltip>
+          <Tooltip content="Neutral tooltip" intent="neutral">
+            <Button type="contained" intent="neutral">Neutral</Button>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Custom Delay</Text>
+        <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+          <Tooltip content="Instant (0ms)" delay={0}>
+            <Button type="outlined">No Delay</Button>
+          </Tooltip>
+          <Tooltip content="Quick (200ms)" delay={200}>
+            <Button type="outlined">Default</Button>
+          </Tooltip>
+          <Tooltip content="Slow (1000ms)" delay={1000}>
+            <Button type="outlined">Slow</Button>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Long Content</Text>
+        <Tooltip content="This is a longer tooltip that demonstrates how the component handles multi-line content automatically">
+          <Button type="outlined">Hover for long text</Button>
+        </Tooltip>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">On Text</Text>
+        <View>
+          <Tooltip content="Additional information">
+            <Text style={{ textDecorationLine: 'underline' }}>
+              Hover over this text
+            </Text>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Rich Content</Text>
+        <Tooltip
+          content={
+            <View spacing="xs">
+              <Text weight="bold">Rich Tooltip</Text>
+              <Text>With multiple lines</Text>
+              <Text>and formatting</Text>
+            </View>
+          }
+        >
+          <Button type="outlined">Rich Content</Button>
+        </Tooltip>
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default TooltipExamples;

package/src/examples/VideoExamples.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import Video from '../Video';
+
+export const VideoExamples: React.FC = () => {
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Video Examples</Text>
+
+      <View spacing="sm" style={{ padding: 12, backgroundColor: '#fff3cd', borderRadius: 8 }}>
+        <Text size="sm" weight="semibold">Note:</Text>
+        <Text size="sm">
+          On React Native, this component requires react-native-video to be installed.
+          The examples below use sample videos from the web.
+        </Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Video with Controls</Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Video with Poster</Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
+          poster="https://picsum.photos/800/450"
+          width="100%"
+          aspectRatio={16 / 9}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Autoplay & Loop</Text>
+        <Text size="sm" color="secondary">
+          Video plays automatically and loops continuously
+        </Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          autoPlay={true}
+          loop={true}
+          muted={true}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Fixed Size</Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
+          width={640}
+          height={360}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Rounded Corners</Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          borderRadius={16}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Different Aspect Ratios</Text>
+        <View spacing="sm">
+          <Text size="sm" weight="medium">16:9 (Widescreen)</Text>
+          <Video
+            source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+            width="100%"
+            aspectRatio={16 / 9}
+            controls={true}
+          />
+
+          <Text size="sm" weight="medium">4:3 (Standard)</Text>
+          <Video
+            source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
+            width="100%"
+            aspectRatio={4 / 3}
+            controls={true}
+          />
+
+          <Text size="sm" weight="medium">1:1 (Square)</Text>
+          <Video
+            source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
+            width={300}
+            aspectRatio={1}
+            controls={true}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Without Controls</Text>
+        <Text size="sm" color="secondary">
+          Video with controls disabled
+        </Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          controls={false}
+          autoPlay={true}
+          loop={true}
+          muted={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Event Handlers</Text>
+        <Text size="sm" color="secondary">
+          Check console for video events (onLoad, onPlay, onPause, onEnd)
+        </Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          controls={true}
+          onLoad={() => console.log('Video loaded')}
+          onPlay={() => console.log('Video playing')}
+          onPause={() => console.log('Video paused')}
+          onEnd={() => console.log('Video ended')}
+          onProgress={(progress) => console.log('Progress:', progress)}
+        />
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default VideoExamples;

package/src/examples/ViewExamples.tsx

@@ -1,107 +1,115 @@
-import React from 'react';
 import { Screen, View, Text } from '../index';
 
 export const ViewExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         View Examples
       </Text>
-      
+
       {/* Spacing Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Spacing Variants</Text>
-        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View spacing="none" background="surface" border="thin">
-            <Text size="small">None</Text>
+        <Text size="md" weight="semibold">Spacing Variants</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+          <View spacing="none" background="secondary" border="thin">
+            <Text size="sm">None</Text>
           </View>
-          <View spacing="xs" background="surface" border="thin">
-            <Text size="small">XS</Text>
+          <View spacing="xs" background="secondary" border="thin">
+            <Text size="sm">XS</Text>
           </View>
-          <View spacing="sm" background="surface" border="thin">
-            <Text size="small">SM</Text>
+          <View spacing="sm" background="secondary" border="thin">
+            <Text size="sm">SM</Text>
           </View>
-          <View spacing="md" background="surface" border="thin">
-            <Text size="small">MD</Text>
+          <View spacing="md" background="secondary" border="thin">
+            <Text size="sm">MD</Text>
           </View>
-          <View spacing="lg" background="surface" border="thin">
-            <Text size="small">LG</Text>
+          <View spacing="lg" background="secondary" border="thin">
+            <Text size="sm">LG</Text>
           </View>
-          <View spacing="xl" background="surface" border="thin">
-            <Text size="small">XL</Text>
+          <View spacing="xl" background="secondary" border="thin">
+            <Text size="sm">XL</Text>
           </View>
         </View>
       </View>
 
       {/* Background Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Background Variants</Text>
+        <Text size="md" weight="semibold">Background Variants</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View background="transparent" border="thin" spacing="sm">
-            <Text size="small">Transparent</Text>
+          <View background="transparent" border="thin" spacing="sm" radius="sm">
+            <Text size="sm" color="primary">Transparent</Text>
+          </View>
+          <View background="primary" spacing="sm" radius="sm">
+            <Text size="sm" color="primary">Primary</Text>
           </View>
-          <View background="surface" spacing="sm">
-            <Text size="small">Surface</Text>
+          <View background="secondary" spacing="sm" radius="sm">
+            <Text size="sm" color="secondary">Secondary</Text>
           </View>
-          <View background="primary" spacing="sm">
-            <Text size="small" color="primary">Primary</Text>
+          <View background="tertiary" spacing="sm" radius="sm">
+            <Text size="sm" color="tertiary">Tertiary</Text>
           </View>
-          <View background="secondary" spacing="sm">
-            <Text size="small" color="secondary">Secondary</Text>
+          <View background="inverse" spacing="sm" radius="sm">
+            <Text size="sm" color="inverse">Inverse (of primary)</Text>
+          </View>
+          <View background="inverse-secondary" spacing="sm" radius="sm">
+            <Text size="sm" color="inverse-secondary">Inverse Secondary</Text>
+          </View>
+          <View background="inverse-tertiary" spacing="sm" radius="sm">
+            <Text size="sm" color="inverse-tertiary">Inverse Tertiary</Text>
           </View>
         </View>
       </View>
 
       {/* Border Radius Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Border Radius</Text>
+        <Text size="md" weight="semibold">Border Radius</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View radius="none" background="surface" spacing="sm" border="thin">
-            <Text size="small">None</Text>
+          <View radius="none" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">None</Text>
           </View>
-          <View radius="xs" background="surface" spacing="sm" border="thin">
-            <Text size="small">XS</Text>
+          <View radius="xs" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">XS</Text>
           </View>
-          <View radius="sm" background="surface" spacing="sm" border="thin">
-            <Text size="small">SM</Text>
+          <View radius="sm" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">SM</Text>
           </View>
-          <View radius="md" background="surface" spacing="sm" border="thin">
-            <Text size="small">MD</Text>
+          <View radius="md" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">MD</Text>
           </View>
-          <View radius="lg" background="surface" spacing="sm" border="thin">
-            <Text size="small">LG</Text>
+          <View radius="lg" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">LG</Text>
           </View>
-          <View radius="xl" background="surface" spacing="sm" border="thin">
-            <Text size="small">XL</Text>
+          <View radius="xl" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">XL</Text>
           </View>
         </View>
       </View>
 
       {/* Border Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Border Variants</Text>
+        <Text size="md" weight="semibold">Border Variants</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View border="none" background="surface" spacing="sm" radius="sm">
-            <Text size="small">None</Text>
+          <View border="none" background="secondary" spacing="sm" radius="sm">
+            <Text size="sm">None</Text>
           </View>
-          <View border="thin" background="surface" spacing="sm" radius="sm">
-            <Text size="small">Thin</Text>
+          <View border="thin" background="secondary" spacing="sm" radius="sm">
+            <Text size="sm">Thin</Text>
           </View>
-          <View border="thick" background="surface" spacing="sm" radius="sm">
-            <Text size="small">Thick</Text>
+          <View border="thick" background="secondary" spacing="sm" radius="sm">
+            <Text size="sm">Thick</Text>
           </View>
         </View>
       </View>
 
       {/* Layout Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Layout Examples</Text>
+        <Text size="md" weight="semibold">Layout Examples</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <View 
-            background="surface" 
-            spacing="md" 
-            radius="md" 
+          <View
+            background="secondary"
+            spacing="md"
+            radius="md"
             border="thin"
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
           >
@@ -109,11 +117,11 @@ export const ViewExamples = () => {
             <Text>Center</Text>
             <Text>Right</Text>
           </View>
-          
-          <View 
-            background="surface" 
-            spacing="md" 
-            radius="md" 
+
+          <View
+            background="secondary"
+            spacing="md"
+            radius="md"
             border="thin"
             style={{ flexDirection: 'column', alignItems: 'center' }}
           >

package/src/examples/index.ts

@@ -12,7 +12,22 @@ export { ScreenExamples } from './ScreenExamples';
 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,
+  };
+};