@idealyst/components 1.0.83 → 1.0.84

package/src/Chip/types.ts

@@ -0,0 +1,51 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Intent, Size } from '@idealyst/theme';
+
+export type ChipSize = Size;
+export type ChipType = 'filled' | 'outlined' | 'soft';
+export type ChipIntent = Intent;
+
+export interface ChipProps {
+  /** The text content of the chip */
+  label: string;
+
+  /** Visual style variant */
+  type?: ChipType;
+
+  /** Color intent/semantic meaning */
+  intent?: ChipIntent;
+
+  /** Size of the chip */
+  size?: ChipSize;
+
+  /** Icon to display before the label. Can be an icon name (string) or a custom React element */
+  icon?: IconName | React.ReactNode;
+
+  /** Whether the chip can be deleted */
+  deletable?: boolean;
+
+  /** Callback when delete button is pressed */
+  onDelete?: () => void;
+
+  /** Icon to display in the delete button. Defaults to 'close' */
+  deleteIcon?: IconName | React.ReactNode;
+
+  /** Whether the chip is selectable */
+  selectable?: boolean;
+
+  /** Whether the chip is selected (when selectable) */
+  selected?: boolean;
+
+  /** Callback when chip is pressed */
+  onPress?: () => void;
+
+  /** Whether the chip is disabled */
+  disabled?: boolean;
+
+  /** Custom style */
+  style?: StyleProp<ViewStyle>;
+
+  /** Test ID for testing */
+  testID?: string;
+}

package/src/Dialog/Dialog.native.tsx

@@ -1,21 +1,57 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, forwardRef } from 'react';
 import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
 
-const Dialog: React.FC<DialogProps> = ({
+const Dialog = forwardRef<View, DialogProps>(({
   open,
   onOpenChange,
   title,
   children,
-  size = 'medium',
-  variant = 'default',
+  size = 'md',
+  type = 'standard',
   showCloseButton = true,
   closeOnBackdropClick = true,
   animationType = 'fade',
   style,
   testID,
-}) => {
+}, ref) => {
+  const backdropOpacity = useSharedValue(0);
+  const containerScale = useSharedValue(0.9);
+  const containerOpacity = useSharedValue(0);
+
+  // Animate in/out when open changes
+  useEffect(() => {
+    if (open) {
+      backdropOpacity.value = withTiming(1, {
+        duration: 200,
+        easing: Easing.out(Easing.ease),
+      });
+      containerScale.value = withTiming(1, {
+        duration: 250,
+        easing: Easing.out(Easing.cubic),
+      });
+      containerOpacity.value = withTiming(1, {
+        duration: 200,
+        easing: Easing.out(Easing.ease),
+      });
+    } else {
+      backdropOpacity.value = withTiming(0, {
+        duration: 150,
+        easing: Easing.in(Easing.ease),
+      });
+      containerScale.value = withTiming(0.9, {
+        duration: 150,
+        easing: Easing.in(Easing.cubic),
+      });
+      containerOpacity.value = withTiming(0, {
+        duration: 150,
+        easing: Easing.in(Easing.ease),
+      });
+    }
+  }, [open]);
+
   // Handle Android back button
   useEffect(() => {
     if (!open) return;
@@ -42,22 +78,37 @@ const Dialog: React.FC<DialogProps> = ({
   // Apply variants
   dialogStyles.useVariants({
     size,
-    variant,
+    type,
+  });
+
+  const backdropAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: backdropOpacity.value,
+    };
+  });
+
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: containerOpacity.value,
+      transform: [
+        { scale: containerScale.value },
+      ],
+    };
   });
 
   return (
     <Modal
       visible={open}
       transparent
-      animationType={animationType}
+      animationType="none"
       onRequestClose={() => onOpenChange(false)}
       statusBarTranslucent
       testID={testID}
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
-        <View style={dialogStyles.backdrop}>
+        <Animated.View style={[dialogStyles.backdrop, backdropAnimatedStyle]}>
           <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
-            <View style={[dialogStyles.container, style]}>
+            <Animated.View ref={ref as any} style={[dialogStyles.container, style, containerAnimatedStyle]}>
               {(title || showCloseButton) && (
                 <View style={dialogStyles.header}>
                   {title && (
@@ -80,12 +131,14 @@ const Dialog: React.FC<DialogProps> = ({
               <View style={dialogStyles.content}>
                 {children}
               </View>
-            </View>
+            </Animated.View>
           </TouchableWithoutFeedback>
-        </View>
+        </Animated.View>
       </TouchableWithoutFeedback>
     </Modal>
   );
-};
+});
+
+Dialog.displayName = 'Dialog';
 
 export default Dialog;

package/src/Dialog/Dialog.styles.tsx

@@ -1,148 +1,166 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles} from '@idealyst/theme';
+type DialogSize = 'sm' | 'md' | 'lg' | 'fullscreen';
+type DialogType = 'default' | 'alert' | 'confirmation';
 
-export const dialogStyles = StyleSheet.create((theme) => ({
-  backdrop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 1000,
-    
-    // Web-specific styles
-    _web: {
-      position: 'fixed',
-      transition: 'opacity 150ms ease-out',
-    },
-  },
-  
-  container: {
-    backgroundColor: theme.colors?.background?.primary || '#ffffff',
-    borderRadius: theme.borderRadius?.lg || 12,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 10,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 20,
-    elevation: 10,
-    maxHeight: '90%',
-    
-    variants: {
-      size: {
-        small: {
-          width: '90%',
-          maxWidth: 400,
+type DialogVariants = {
+    size: DialogSize;
+    type: DialogType;
+}
+
+export type ExpandedDialogStyles = StylesheetStyles<keyof DialogVariants>;
+
+export type DialogStylesheet = {
+    backdrop: ExpandedDialogStyles;
+    container: ExpandedDialogStyles;
+    header: ExpandedDialogStyles;
+    title: ExpandedDialogStyles;
+    closeButton: ExpandedDialogStyles;
+    closeButtonText: ExpandedDialogStyles;
+    content: ExpandedDialogStyles;
+    modal: ExpandedDialogStyles;
+}
+
+/**
+ * Create size variants for container
+ */
+function createContainerSizeVariants() {
+    return {
+        sm: {
+            width: '90%',
+            maxWidth: 400,
         },
-        medium: {
-          width: '90%',
-          maxWidth: 600,
+        md: {
+            width: '90%',
+            maxWidth: 600,
         },
-        large: {
-          width: '90%',
-          maxWidth: 800,
+        lg: {
+            width: '90%',
+            maxWidth: 800,
         },
         fullscreen: {
-          width: '100%',
-          height: '100%',
-          borderRadius: 0,
-          maxHeight: '100%',
+            width: '100%',
+            height: '100%',
+            borderRadius: 0,
+            maxHeight: '100%',
         },
-      },
-      variant: {
-        default: {},
+    } as const;
+}
+
+/**
+ * Create type variants for container
+ */
+function createContainerTypeVariants(theme: Theme) {
+    return {
+        standard: {},
         alert: {
-          borderTopWidth: 4,
-          borderTopColor: theme.colors?.border?.primary || '#e5e7eb',
+            borderTopWidth: 4,
+            borderTopColor: theme.colors.border.primary,
         },
         confirmation: {
-          borderTopWidth: 4,
-          borderTopColor: theme.colors?.border?.primary || '#e5e7eb',
+            borderTopWidth: 4,
+            borderTopColor: theme.colors.border.primary,
         },
-      },
-    },
-    
-    // Web-specific styles
-    _web: {
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'auto',
-      boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-      transition: 'opacity 150ms ease-out, transform 150ms ease-out',
-      transformOrigin: 'center center',
-    },
-  },
-  
-  header: {
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors?.border?.primary || '#e5e7eb',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    
-    _web: {
-      borderBottomStyle: 'solid',
-    },
-  },
-  
-  title: {
-    marginLeft: theme.spacing?.lg || 12,
-    fontSize: 18,
-    paddingVertical: theme.spacing.md,
-    fontWeight: '600',
-    color: theme.colors?.text?.primary || '#111827',
-    flex: 1,
+    } as const;
+}
 
-    _web: {
-      paddingVertical: theme.spacing.xs,
-    }
-  },
-  
-  closeButton: {
-    width: 32,
-    height: 32,
-    marginRight: theme.spacing?.md || 12,
-    borderRadius: 16,
-    backgroundColor: 'transparent',
-    border: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    
-    _web: {
-      _hover: {
-        backgroundColor: theme.colors?.background?.secondary || '#f3f4f6',
-      },
-    },
-  },
-  
-  closeButtonText: {
-    fontSize: 18,
-    color: theme.colors?.text?.secondary || '#6b7280',
-    fontWeight: '500',
-  },
-  
-  content: {
-    padding: theme.spacing?.lg || 16,
-    
-    _web: {
-      overflow: 'visible',
-      maxHeight: 'none',
-    },
-  },
-  
-  // Native-specific modal styles
-  modal: {
-    margin: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-}));
+// 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 dialogStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        backdrop: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+            _web: {
+                position: 'fixed',
+                transition: 'opacity 150ms ease-out',
+            },
+        },
+        container: {
+            backgroundColor: theme.colors.surface.primary,
+            borderRadius: 12,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 10 },
+            shadowOpacity: 0.25,
+            shadowRadius: 20,
+            elevation: 10,
+            maxHeight: '90%',
+            variants: {
+                size: createContainerSizeVariants(),
+                type: createContainerTypeVariants(theme),
+            },
+            _web: {
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'auto',
+                boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+                transition: 'opacity 150ms ease-out, transform 150ms ease-out',
+                transformOrigin: 'center center',
+            },
+        },
+        header: {
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border.primary,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            _web: {
+                borderBottomStyle: 'solid',
+            },
+        },
+        title: {
+            marginLeft: 24,
+            fontSize: 18,
+            paddingVertical: 16,
+            fontWeight: '600',
+            color: theme.colors.text.primary,
+            flex: 1,
+            _web: {
+                paddingVertical: 4,
+            },
+        },
+        closeButton: {
+            width: 32,
+            height: 32,
+            marginRight: 16,
+            borderRadius: 16,
+            backgroundColor: 'transparent',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            _web: {
+                border: 'none',
+                cursor: 'pointer',
+                _hover: {
+                    backgroundColor: theme.colors.surface.secondary,
+                },
+            },
+        },
+        closeButtonText: {
+            fontSize: 18,
+            color: theme.colors.text.secondary,
+            fontWeight: '500',
+        },
+        content: {
+            padding: 24,
+            _web: {
+                overflow: 'visible',
+                maxHeight: 'none',
+            },
+        },
+        modal: {
+            margin: 0,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    };
+});

package/src/Dialog/Dialog.web.tsx

@@ -1,24 +1,24 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 import { getWebProps } from 'react-native-unistyles/web';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
 import Icon from '../Icon';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-
-const Dialog: React.FC<DialogProps> = ({
+const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   open,
   onOpenChange,
   title,
   children,
-  size = 'medium',
-  variant = 'default',
+  size = 'md',
+  type = 'standard',
   showCloseButton = true,
   closeOnBackdropClick = true,
   closeOnEscapeKey = true,
   style,
   testID,
-}) => {
+}, ref) => {
   const dialogRef = useRef<HTMLDivElement>(null);
   const previousActiveElementRef = useRef<HTMLElement | null>(null);
   const [isVisible, setIsVisible] = useState(false);
@@ -104,7 +104,7 @@ const Dialog: React.FC<DialogProps> = ({
   // Apply variants
   dialogStyles.useVariants({
     size,
-    variant,
+    type,
   });
 
   const backdropProps = getWebProps([
@@ -112,9 +112,9 @@ const Dialog: React.FC<DialogProps> = ({
     { opacity: isVisible ? 1 : 0 }
   ]);
   const containerProps = getWebProps([
-    dialogStyles.container, 
-    style,
-    isVisible 
+    dialogStyles.container,
+    style as any,
+    isVisible
       ? { opacity: 1, transform: 'scale(1) translateY(0px)' }
       : { opacity: 0, transform: 'scale(0.96) translateY(-4px)' }
   ]);
@@ -123,9 +123,12 @@ const Dialog: React.FC<DialogProps> = ({
   const closeButtonProps = getWebProps([dialogStyles.closeButton]);
   const contentProps = getWebProps([dialogStyles.content]);
 
+  const mergedBackdropRef = useMergeRefs(ref, backdropProps.ref);
+
   const dialogContent = (
     <div
       {...backdropProps}
+      ref={mergedBackdropRef}
       onClick={handleBackdropClick}
       data-testid={testID}
     >
@@ -165,6 +168,8 @@ const Dialog: React.FC<DialogProps> = ({
   );
 
   return createPortal(dialogContent, document.body);
-};
+});
+
+Dialog.displayName = 'Dialog';
 
 export default Dialog;

package/src/Dialog/index.ts

@@ -1,2 +1,5 @@
-export { default } from './Dialog.web';
-export * from './types';
+import DialogComponent from './Dialog.web';
+
+export default DialogComponent;
+export { DialogComponent as Dialog };
+export * from './types';

package/src/Dialog/index.web.ts

@@ -1,2 +1,5 @@
-export { default } from './Dialog.web';
-export * from './types';
+import DialogComponent from './Dialog.web';
+
+export default DialogComponent;
+export { DialogComponent as Dialog };
+export * from './types';

package/src/Dialog/types.ts

@@ -1,61 +1,67 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type DialogSizeVariant = 'sm' | 'md' | 'lg' | 'fullscreen';
+export type DialogType = 'standard' | 'alert' | 'confirmation';
+export type DialogAnimationType = 'slide' | 'fade' | 'none';
 
 export interface DialogProps {
   /**
    * Whether the dialog is open/visible
    */
   open: boolean;
-  
+
   /**
    * Called when the dialog should be opened or closed
    */
   onOpenChange: (open: boolean) => void;
-  
+
   /**
    * Optional title for the dialog
    */
   title?: string;
-  
+
   /**
    * The content to display inside the dialog
    */
   children: ReactNode;
-  
+
   /**
    * The size of the dialog
    */
-  size?: 'small' | 'medium' | 'large' | 'fullscreen';
-  
+  size?: DialogSizeVariant;
+
   /**
    * The visual style variant of the dialog
    */
-  variant?: 'default' | 'alert' | 'confirmation';
-  
+  type?: DialogType,
+
   /**
    * Whether to show the close button in the header
    */
   showCloseButton?: boolean;
-  
+
   /**
    * Whether clicking the backdrop should close the dialog
    */
   closeOnBackdropClick?: boolean;
-  
+
   /**
    * Whether pressing escape key should close the dialog (web only)
    */
   closeOnEscapeKey?: boolean;
-  
+
   /**
    * Animation type for the dialog (native only)
    */
-  animationType?: 'slide' | 'fade' | 'none';
-  
+  animationType?: DialogAnimationType;
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */