@idealyst/components 1.0.83 → 1.0.84

package/src/Video/Video.web.tsx

@@ -0,0 +1,115 @@
+import React, { useRef } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { videoStyles } from './Video.styles';
+import type { VideoProps, VideoSource } from './types';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+const Video: React.FC<VideoProps> = ({
+  source,
+  poster,
+  width,
+  height,
+  aspectRatio,
+  controls = true,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  playsInline = true,
+  preload = 'metadata',
+  onLoad,
+  onError,
+  onPlay,
+  onPause,
+  onEnd,
+  onProgress,
+  borderRadius,
+  style,
+  testID,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const containerProps = getWebProps([videoStyles.container, style as any]);
+  const videoProps = getWebProps([videoStyles.video]);
+
+  const videoSource = typeof source === 'string'
+    ? source
+    : (source as VideoSource).uri;
+
+  const videoType = typeof source === 'object'
+    ? (source as VideoSource).type
+    : undefined;
+
+  const handleLoadedMetadata = () => {
+    onLoad?.();
+  };
+
+  const handleError = (e: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+    onError?.(e);
+  };
+
+  const handlePlay = () => {
+    onPlay?.();
+  };
+
+  const handlePause = () => {
+    onPause?.();
+  };
+
+  const handleEnded = () => {
+    onEnd?.();
+  };
+
+  const handleTimeUpdate = () => {
+    if (videoRef.current && onProgress) {
+      onProgress({
+        currentTime: videoRef.current.currentTime,
+        playableDuration: videoRef.current.duration || 0,
+      });
+    }
+  };
+
+  const containerStyle: React.CSSProperties = {
+    width: width || '100%',
+    height: height || 'auto',
+    aspectRatio: aspectRatio ? String(aspectRatio) : undefined,
+    borderRadius: borderRadius ? `${borderRadius}px` : undefined,
+  };
+
+  const vidStyle: React.CSSProperties = {
+    borderRadius: borderRadius ? `${borderRadius}px` : undefined,
+  };
+
+  const mergedVideoRef = useMergeRefs(videoRef, videoProps.ref);
+
+  return (
+    <div
+      {...containerProps}
+      style={containerStyle}
+      data-testid={testID}
+    >
+      <video
+        ref={mergedVideoRef}
+        className={videoProps.className}
+        style={vidStyle}
+        poster={poster}
+        controls={controls}
+        autoPlay={autoPlay}
+        loop={loop}
+        muted={muted}
+        playsInline={playsInline}
+        preload={preload}
+        onLoadedMetadata={handleLoadedMetadata}
+        onError={handleError}
+        onPlay={handlePlay}
+        onPause={handlePause}
+        onEnded={handleEnded}
+        onTimeUpdate={handleTimeUpdate}
+      >
+        <source src={videoSource} type={videoType || 'video/mp4'} />
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+};
+
+export default Video;

package/src/Video/index.native.ts

@@ -0,0 +1,5 @@
+import VideoComponent from './Video.native';
+
+export default VideoComponent;
+export { VideoComponent as Video };
+export * from './types';

package/src/Video/index.ts

@@ -0,0 +1,5 @@
+import VideoComponent from './Video.web';
+
+export default VideoComponent;
+export { VideoComponent as Video };
+export * from './types';

package/src/Video/types.ts

@@ -0,0 +1,29 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface VideoSource {
+  uri: string;
+  type?: string;
+}
+
+export interface VideoProps {
+  source: VideoSource | string;
+  poster?: string;
+  width?: number | string;
+  height?: number | string;
+  aspectRatio?: number;
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  playsInline?: boolean;
+  preload?: 'auto' | 'metadata' | 'none';
+  onLoad?: () => void;
+  onError?: (error: any) => void;
+  onPlay?: () => void;
+  onPause?: () => void;
+  onEnd?: () => void;
+  onProgress?: (progress: { currentTime: number; playableDuration: number }) => void;
+  borderRadius?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/View/View.native.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { View as RNView } from 'react-native';
+import React, { forwardRef } from 'react';
+import { View as RNView, ViewStyle } from 'react-native';
 import { ViewProps } from './types';
-import viewStyles from './View.styles';
+import { viewStyles } from './View.styles';
 
-const View: React.FC<ViewProps> = ({
+const View = forwardRef<RNView, ViewProps>(({
   children,
   spacing = 'none',
   marginVariant = 'none',
@@ -18,10 +18,9 @@ const View: React.FC<ViewProps> = ({
   borderColor,
   style,
   testID,
-}) => {
+}, ref) => {
   viewStyles.useVariants({
     spacing,
-    margin: marginVariant,
     background,
     radius,
     border,
@@ -40,17 +39,13 @@ const View: React.FC<ViewProps> = ({
     return baseStyles;
   };
 
-  const viewStyleArray = [
-    viewStyles.view,
-    getStyles(),
-    style,
-  ];
-
   return (
-    <RNView style={viewStyleArray} testID={testID}>
+    <RNView ref={ref} style={[viewStyles.view, getStyles(), style]} testID={testID}>
       {children}
     </RNView>
   );
-};
+});
+
+View.displayName = 'View';
 
 export default View; 

package/src/View/View.styles.tsx

@@ -1,103 +1,111 @@
-import { StyleSheet } from "react-native-unistyles";
 
-const viewStyles = StyleSheet.create((theme) => ({
-  view: {
-    variants: {
-      spacing: {
-        none: {
-          padding: 0,
-        },
-        xs: {
-          padding: theme.spacing.xs,
-        },
-        sm: {
-          padding: theme.spacing.sm,
-        },
-        md: {
-          padding: theme.spacing.md,
-        },
-        lg: {
-          padding: theme.spacing.lg,
-        },
-        xl: {
-          padding: theme.spacing.xl,
-        },
-      },
-      margin: {
-        none: {
-          margin: 0,
-        },
-        xs: {
-          margin: theme.spacing.xs,
-        },
-        sm: {
-          margin: theme.spacing.sm,
-        },
-        md: {
-          margin: theme.spacing.md,
-        },
-        lg: {
-          margin: theme.spacing.lg,
-        },
-        xl: {
-          margin: theme.spacing.xl,
-        },
-      },
-      background: {
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Surface} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { ViewBackgroundVariant, ViewBorderVariant, ViewRadiusVariant, ViewSpacingVariant } from './types';
+
+type ViewVariants = {
+    spacing: ViewSpacingVariant;
+    background: ViewBackgroundVariant;
+    radius: ViewRadiusVariant;
+    border: ViewBorderVariant;
+}
+
+export type ExpandedViewStyles = StylesheetStyles<keyof ViewVariants>;
+
+export type ViewStylesheet = {
+    view: ExpandedViewStyles;
+}
+
+/**
+ * Create spacing variants for view
+ */
+function createSpacingVariants(theme: Theme) {
+    const spacingVariants = buildSizeVariants(theme, 'view', (size) => ({
+        padding: size.padding,
+        gap: size.spacing,
+    }));
+
+    spacingVariants['none'] = {
+        padding: 0,
+        gap: 0,
+    };
+
+    return spacingVariants as Record<ViewSpacingVariant, Partial<ExpandedViewStyles>>;
+}
+
+/**
+ * Create background variants for view
+ */
+function createBackgroundVariants(theme: Theme) {
+    const variants: any = {
         transparent: {
-          backgroundColor: 'transparent',
-        },
-        surface: {
-          backgroundColor: theme.colors.surface,
-        },
-        primary: {
-          backgroundColor: theme.colors.primary,
-        },
-        secondary: {
-          backgroundColor: theme.colors.secondary,
-        },
-      },
-      radius: {
-        none: {
-          borderRadius: 0,
-        },
-        xs: {
-          borderRadius: theme.borderRadius.xs,
-        },
-        sm: {
-          borderRadius: theme.borderRadius.sm,
-        },
-        md: {
-          borderRadius: theme.borderRadius.md,
-        },
-        lg: {
-          borderRadius: theme.borderRadius.lg,
+            backgroundColor: 'transparent',
         },
-        xl: {
-          borderRadius: theme.borderRadius.xl,
-        },
-      },
-      border: {
+    };
+
+    // Add all surface colors programmatically
+    for (const surface in theme.colors.surface) {
+        variants[surface] = {
+            backgroundColor: theme.colors.surface[surface as Surface],
+        };
+    }
+
+    return variants;
+}
+
+/**
+ * Create radius variants for view
+ */
+function createRadiusVariants() {
+    return {
+        none: { borderRadius: 0 },
+        xs: { borderRadius: 2 },
+        sm: { borderRadius: 4 },
+        md: { borderRadius: 8 },
+        lg: { borderRadius: 12 },
+        xl: { borderRadius: 16 },
+    } as const;
+}
+
+/**
+ * Create border variants for view
+ */
+function createBorderVariants(theme: Theme) {
+    return {
         none: {
-          borderWidth: 0,
+            borderWidth: 0,
         },
         thin: {
-          borderWidth: 1,
-          borderColor: theme.colors.border,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors['gray.300'],
         },
         thick: {
-          borderWidth: 2,
-          borderColor: theme.colors.border,
+            borderWidth: 2,
+            borderStyle: 'solid',
+            borderColor: theme.colors['gray.300'],
         },
-      },
-    },
-    // Web-specific styles
-    _web: {
-      display: 'flex',
-      flexDirection: 'column',
-      boxSizing: 'border-box',
-    },
-  },
-}));
+    } as const;
+}
 
-export default viewStyles; 
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+export const viewStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    view: {
+        display: 'flex',
+        variants: {
+            spacing: createSpacingVariants(theme),
+            background: createBackgroundVariants(theme),
+            radius: createRadiusVariants(),
+            border: createBorderVariants(theme),
+        },
+        _web: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxSizing: 'border-box',
+        },
+    },
+  };
+});

package/src/View/View.web.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { ViewProps } from './types';
-import viewStyles from './View.styles';
+import { viewStyles } from './View.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-const View: React.FC<ViewProps> = ({
+const View = forwardRef<HTMLDivElement, ViewProps>(({
   children,
   spacing = 'none',
   marginVariant = 'none',
   background = 'transparent',
-  radius = 'none',  
+  radius = 'none',
   border = 'none',
   backgroundColor,
   padding,
@@ -18,18 +19,17 @@ const View: React.FC<ViewProps> = ({
   borderColor,
   style,
   testID,
-}) => {
+}, ref) => {
   viewStyles.useVariants({
-    spacing,
-    margin: marginVariant,
     background,
     radius,
     border,
+    spacing,
   });
 
   // Create dynamic styles based on custom props (overrides variants)
   const dynamicStyles: any = {};
-  
+
   if (backgroundColor) dynamicStyles.backgroundColor = backgroundColor;
   if (padding !== undefined) dynamicStyles.padding = padding;
   if (margin !== undefined) dynamicStyles.margin = margin;
@@ -37,24 +37,23 @@ const View: React.FC<ViewProps> = ({
   if (borderWidth !== undefined) dynamicStyles.borderWidth = borderWidth;
   if (borderColor) dynamicStyles.borderColor = borderColor;
 
-  // Create the style array following the official documentation pattern
-  const viewStyleArray = [
-    viewStyles.view,
-    dynamicStyles,
-    style,
-  ];
+  /** @ts-ignore */
+  const webProps = getWebProps(viewStyles.view);
 
-  // Use getWebProps to generate className and ref for web
-  const webProps = getWebProps(viewStyleArray);
+  const mergedRef = useMergeRefs(ref, webProps.ref);
 
   return (
     <div
       {...webProps}
+      style={style as any}
+      ref={mergedRef}
       data-testid={testID}
     >
       {children}
     </div>
   );
-};
+});
+
+View.displayName = 'View';
 
 export default View; 

package/src/View/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic View export
-// Bundlers will resolve to index.web.ts (web) or index.native.ts (React Native)
-// This file serves as fallback for web environments
-export { default } from './View.web';
-export * from './types'; 
+import ViewComponent from './View.web';
+
+export default ViewComponent;
+export { ViewComponent as View };
+export * from './types';

package/src/View/index.web.ts

@@ -1,3 +1,5 @@
-// Web-specific View export
-export { default } from './View.web';
-export * from './types'; 
+import ViewComponent from './View.web';
+
+export default ViewComponent;
+export { ViewComponent as View };
+export * from './types';

package/src/View/types.ts

@@ -1,71 +1,79 @@
-import { ReactNode } from 'react';
+import { Size, Surface } from '@idealyst/theme';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type ViewBackgroundVariant = Surface | 'transparent';
+export type ViewSpacingVariant = Size | 'none';
+export type ViewRadiusVariant = Size | 'none';
+export type ViewBorderVariant = 'none' | 'thin' | 'thick';
 
 export interface ViewProps {
   /**
    * The content to display inside the view
    */
   children?: ReactNode;
-  
+
   /**
-   * Padding variant
+   * Padding/spacing variant
    */
-  spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  
+  spacing?: ViewSpacingVariant;
+
   /**
    * Margin variant
    */
-  marginVariant?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  
+  marginVariant?: ViewSpacingVariant;
+
   /**
    * Background variant
    */
-  background?: 'transparent' | 'surface' | 'primary' | 'secondary';
-  
+  background?: ViewBackgroundVariant;
+
   /**
    * Border radius variant
    */
-  radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  
+  radius?: ViewRadiusVariant;
+
   /**
    * Border variant
    */
-  border?: 'none' | 'thin' | 'thick';
-  
+  border?: ViewBorderVariant;
+
   /**
    * Custom background color (overrides background variant)
    */
   backgroundColor?: string;
-  
+
   /**
    * Custom padding (overrides spacing variant)
    */
   padding?: number;
-  
+
   /**
    * Custom margin (overrides marginVariant)
    */
   margin?: number;
-  
+
   /**
    * Custom border radius (overrides radius variant)
    */
   borderRadius?: number;
-  
+
   /**
    * Custom border width (overrides border variant)
    */
   borderWidth?: number;
-  
+
   /**
    * Custom border color
    */
   borderColor?: string;
-  
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: React.CSSProperties | StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */