@idealyst/components 1.0.41 → 1.0.44

package/src/Dialog/README.md

@@ -0,0 +1,210 @@
+# Dialog Component
+
+A modal dialog component that creates a global overlay across the entire application. The Dialog component works consistently across web and React Native platforms.
+
+## Features
+
+- **Global Overlay**: Appears above all other content including navigation bars and tab bars
+- **Cross-Platform**: Uses React portals on web and Modal component on React Native
+- **Accessibility**: Focus management, escape key support (web), hardware back button handling (native)
+- **Theme Integration**: Supports intent-based colors and Unistyles variants
+- **Flexible Sizing**: Multiple size options from small to fullscreen
+- **Backdrop Interaction**: Configurable backdrop click behavior
+
+## Usage
+
+```tsx
+import { Dialog, Button, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+const MyComponent = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setOpen(true)}>
+        Open Dialog
+      </Button>
+      
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Dialog Title"
+        size="medium"
+        variant="default"
+        intent="primary"
+      >
+        <Text>Dialog content goes here</Text>
+        <Button onPress={() => setOpen(false)}>
+          Close
+        </Button>
+      </Dialog>
+    </>
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | - | Whether the dialog is visible |
+| `onOpenChange` | `(open: boolean) => void` | - | Called when dialog should open/close |
+| `title` | `string` | - | Optional title displayed in header |
+| `children` | `ReactNode` | - | Content to display inside dialog |
+| `size` | `'small' \| 'medium' \| 'large' \| 'fullscreen'` | `'medium'` | Size of the dialog |
+| `variant` | `'default' \| 'alert' \| 'confirmation'` | `'default'` | Visual style variant |
+| `intent` | `'primary' \| 'neutral' \| 'success' \| 'error' \| 'warning'` | `'primary'` | Color scheme/semantic meaning |
+| `showCloseButton` | `boolean` | `true` | Whether to show close button in header |
+| `closeOnBackdropClick` | `boolean` | `true` | Whether clicking backdrop closes dialog |
+| `closeOnEscapeKey` | `boolean` | `true` | Whether escape key closes dialog (web only) |
+| `animationType` | `'slide' \| 'fade' \| 'none'` | `'fade'` | Animation type (native only) |
+| `style` | `any` | - | Additional platform-specific styles |
+| `testID` | `string` | - | Test identifier |
+
+## Variants
+
+### Size Variants
+- **small**: 400px max width, suitable for simple alerts
+- **medium**: 600px max width, good for forms and content
+- **large**: 800px max width, for complex layouts
+- **fullscreen**: Full screen coverage, removes border radius
+
+### Visual Variants
+- **default**: Standard dialog appearance
+- **alert**: Adds colored top border for alerts
+- **confirmation**: Adds colored top border for confirmations
+
+### Intent Colors
+When used with `alert` or `confirmation` variants:
+- **primary**: Blue top border
+- **success**: Green top border  
+- **error**: Red top border
+- **warning**: Orange top border
+- **neutral**: Gray top border
+
+## Platform Differences
+
+### Web Implementation
+- Uses React portals to render into `document.body`
+- Supports escape key to close
+- Automatic focus management and restoration
+- Click outside to close (configurable)
+- Body scroll prevention when open
+
+### React Native Implementation
+- Uses React Native's `Modal` component
+- Hardware back button handling on Android
+- Touch outside to close (configurable)
+- Configurable animation types
+
+## Examples
+
+### Basic Dialog
+```tsx
+<Dialog
+  open={isOpen}
+  onOpenChange={setIsOpen}
+  title="Basic Dialog"
+>
+  <Text>Simple dialog content</Text>
+</Dialog>
+```
+
+### Alert Dialog
+```tsx
+<Dialog
+  open={alertOpen}
+  onOpenChange={setAlertOpen}
+  title="Important Alert"
+  variant="alert"
+  intent="warning"
+>
+  <Text>This is an important message!</Text>
+</Dialog>
+```
+
+### Confirmation Dialog
+```tsx
+<Dialog
+  open={confirmOpen}
+  onOpenChange={setConfirmOpen}
+  title="Confirm Action"
+  variant="confirmation"
+  intent="error"
+  closeOnBackdropClick={false}
+>
+  <Text>Are you sure you want to delete this item?</Text>
+  <View style={{ flexDirection: 'row', gap: 12, marginTop: 16 }}>
+    <Button variant="outlined" onPress={() => setConfirmOpen(false)}>
+      Cancel
+    </Button>
+    <Button variant="contained" intent="error" onPress={handleDelete}>
+      Delete
+    </Button>
+  </View>
+</Dialog>
+```
+
+### Fullscreen Dialog
+```tsx
+<Dialog
+  open={fullscreenOpen}
+  onOpenChange={setFullscreenOpen}
+  title="Fullscreen Dialog"
+  size="fullscreen"
+>
+  <Text>This dialog covers the entire screen</Text>
+</Dialog>
+```
+
+## Accessibility
+
+- **Focus Management**: Automatically focuses dialog on open and restores focus on close (web)
+- **Keyboard Navigation**: Escape key support on web
+- **Screen Readers**: Proper ARIA roles and labels
+- **Touch Targets**: Minimum 44px touch targets for interactive elements
+- **Hardware Back Button**: Handled automatically on Android
+
+## Best Practices
+
+1. **Use appropriate sizes**: Choose size based on content complexity
+2. **Provide clear actions**: Always include a way to close the dialog
+3. **Use variants appropriately**: Choose alert or confirmation for important dialogs
+4. **Handle confirmation dialogs carefully**: Disable backdrop close for destructive actions
+5. **Keep content focused**: Dialogs should have a single, clear purpose
+6. **Test cross-platform**: Verify behavior on both web and native platforms
+
+## Common Patterns
+
+### Form Dialog
+```tsx
+<Dialog open={formOpen} onOpenChange={setFormOpen} title="Edit Profile">
+  <View spacing="md">
+    <Input label="Name" value={name} onChangeText={setName} />
+    <Input label="Email" value={email} onChangeText={setEmail} />
+    <View style={{ flexDirection: 'row', gap: 12 }}>
+      <Button variant="outlined" onPress={() => setFormOpen(false)}>
+        Cancel
+      </Button>
+      <Button variant="contained" onPress={handleSave}>
+        Save
+      </Button>
+    </View>
+  </View>
+</Dialog>
+```
+
+### Loading Dialog
+```tsx
+<Dialog 
+  open={loading} 
+  onOpenChange={() => {}} 
+  closeOnBackdropClick={false}
+  showCloseButton={false}
+>
+  <View style={{ alignItems: 'center', padding: 20 }}>
+    <Text>Loading...</Text>
+  </View>
+</Dialog>
+```

package/src/Dialog/index.native.ts

@@ -0,0 +1,2 @@
+export { default } from './Dialog.native';
+export * from './types';

package/src/Dialog/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Dialog.web';
+export * from './types';

package/src/Dialog/index.web.ts

@@ -0,0 +1,2 @@
+export { default } from './Dialog.web';
+export * from './types';

package/src/Dialog/types.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+
+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';
+  
+  /**
+   * The visual style variant of the dialog
+   */
+  variant?: 'default' | 'alert' | 'confirmation';
+  
+  /**
+   * 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';
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Input/Input.native.tsx

@@ -3,9 +3,11 @@ import { TextInput } from 'react-native';
 import { InputProps } from './types';
 import { inputStyles } from './Input.styles';
 
-const Input: React.FC<InputProps> = ({
+const Input = React.forwardRef<TextInput, InputProps>(({
   value,
   onChangeText,
+  onFocus,
+  onBlur,
   placeholder,
   disabled = false,
   inputType = 'text',
@@ -16,7 +18,7 @@ const Input: React.FC<InputProps> = ({
   hasError = false,
   style,
   testID,
-}) => {
+}, ref) => {
   const [isFocused, setIsFocused] = useState(false);
 
   const getKeyboardType = () => {
@@ -34,10 +36,16 @@ const Input: React.FC<InputProps> = ({
 
   const handleFocus = () => {
     setIsFocused(true);
+    if (onFocus) {
+      onFocus();
+    }
   };
 
   const handleBlur = () => {
     setIsFocused(false);
+    if (onBlur) {
+      onBlur();
+    }
   };
 
   // Apply variants to the stylesheet
@@ -56,6 +64,7 @@ const Input: React.FC<InputProps> = ({
 
   return (
     <TextInput
+      ref={ref}
       value={value}
       onChangeText={onChangeText}
       placeholder={placeholder}
@@ -70,6 +79,6 @@ const Input: React.FC<InputProps> = ({
       placeholderTextColor="#999999"
     />
   );
-};
+});
 
 export default Input; 

package/src/Input/Input.styles.tsx

@@ -56,6 +56,19 @@ export const inputStyles = StyleSheet.create((theme) => ({
             border: 'none',
           },
         },
+        bare: {
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+          borderColor: 'transparent',
+          color: theme.colors?.text?.primary || '#000000',
+          paddingHorizontal: 0,
+          paddingVertical: 0,
+          
+          _web: {
+            border: 'none',
+            boxShadow: 'none',
+          },
+        },
       },
       focused: {
         true: {
@@ -106,6 +119,16 @@ export const inputStyles = StyleSheet.create((theme) => ({
           elevation: 0.5,
         },
       },
+      // Bare variant focus (no visual changes)
+      {
+        variant: 'bare',
+        focused: true,
+        styles: {
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+          borderColor: 'transparent',
+        },
+      },
     ],
     
     borderRadius: theme.borderRadius?.md || 8,

package/src/Input/Input.web.tsx

@@ -3,9 +3,11 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { InputProps } from './types';
 import { inputStyles } from './Input.styles';
 
-const Input: React.FC<InputProps> = ({
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   value,
   onChangeText,
+  onFocus,
+  onBlur,
   placeholder,
   disabled = false,
   inputType = 'text',
@@ -16,7 +18,8 @@ const Input: React.FC<InputProps> = ({
   hasError = false,
   style,
   testID,
-}) => {
+}, ref) => {
+
   const getInputType = () => {
     switch (inputType) {
       case 'email':
@@ -37,10 +40,22 @@ const Input: React.FC<InputProps> = ({
     }
   };
 
+  const handleFocus = () => {
+    if (onFocus) {
+      onFocus();
+    }
+  };
+
+  const handleBlur = () => {
+    if (onBlur) {
+      onBlur();
+    }
+  };
+
   // Apply variants using the correct Unistyles 3.0 pattern
   inputStyles.useVariants({
     size: size as 'small' | 'medium' | 'large',
-    variant: variant as 'default' | 'outlined' | 'filled',
+    variant: variant as 'default' | 'outlined' | 'filled' | 'bare',
   });
 
   // Create the style array following the official documentation pattern
@@ -51,21 +66,34 @@ const Input: React.FC<InputProps> = ({
     style,
   ].filter(Boolean);
 
-  // Use getWebProps to generate className and ref for web
-  const webProps = getWebProps(inputStyleArray);
+  // Use getWebProps for Unistyles, then manually add our ref
+  const { ref: unistylesRef, ...webProps } = getWebProps(inputStyleArray);
+
+  // Forward the ref while still providing unistyles with access
+  const handleRef = (r: HTMLInputElement | null) => {
+    unistylesRef.current = r;
+    if (typeof ref === 'function') {
+      ref(r);
+    } else if (ref) {
+      ref.current = r;
+    }
+  };
 
   return (
     <input
       {...webProps}
+      ref={handleRef}
       type={secureTextEntry ? 'password' : getInputType()}
       value={value}
       onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
       placeholder={placeholder}
       disabled={disabled}
       autoCapitalize={autoCapitalize}
       data-testid={testID}
     />
   );
-};
+});
 
 export default Input; 

package/src/Input/types.ts

@@ -11,6 +11,16 @@ export interface InputProps {
    */
   onChangeText?: (text: string) => void;
   
+  /**
+   * Called when the input receives focus
+   */
+  onFocus?: () => void;
+  
+  /**
+   * Called when the input loses focus
+   */
+  onBlur?: () => void;
+  
   /**
    * Placeholder text
    */
@@ -44,7 +54,7 @@ export interface InputProps {
   /**
    * Style variant of the input
    */
-  variant?: 'default' | 'outlined' | 'filled';
+  variant?: 'default' | 'outlined' | 'filled' | 'bare';
   
   /**
    * The intent/color scheme of the input (for focus states, validation, etc.)

package/src/Popover/Popover.native.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useRef } from 'react';
+import { Modal, View, TouchableWithoutFeedback, BackHandler, Dimensions } from 'react-native';
+import { PopoverProps } from './types';
+import { popoverStyles } from './Popover.styles';
+
+const Popover: React.FC<PopoverProps> = ({
+  open,
+  onOpenChange,
+  anchor,
+  children,
+  placement = 'bottom',
+  offset = 8,
+  closeOnClickOutside = true,
+  showArrow = false, // Arrows are complex on native, disabled by default
+  style,
+  testID,
+}) => {
+  const popoverRef = useRef<View>(null);
+
+  // Handle Android back button
+  useEffect(() => {
+    if (!open) return;
+
+    const handleBackPress = () => {
+      onOpenChange(false);
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
+    return () => backHandler.remove();
+  }, [open, onOpenChange]);
+
+  const handleBackdropPress = () => {
+    if (closeOnClickOutside) {
+      onOpenChange(false);
+    }
+  };
+
+  if (!open) return null;
+
+  // For React Native, we simplify positioning - center the popover
+  // More complex anchor positioning would require measuring anchor positions
+  // which is challenging cross-platform
+  const screenDimensions = Dimensions.get('window');
+  const popoverStyle = [
+    popoverStyles.container,
+    {
+      // Center on screen as a simplified approach
+      position: 'absolute',
+      top: screenDimensions.height * 0.4,
+      left: 20,
+      right: 20,
+      maxWidth: screenDimensions.width - 40,
+    },
+    style,
+  ];
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+      testID={testID}
+    >
+      <TouchableWithoutFeedback onPress={handleBackdropPress}>
+        <View style={popoverStyles.backdrop}>
+          <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
+            <View ref={popoverRef} style={popoverStyle}>
+              {showArrow && (
+                <View style={[
+                  popoverStyles.arrow,
+                  // Apply placement-based arrow positioning
+                ]} />
+              )}
+              <View style={popoverStyles.content}>
+                {children}
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+export default Popover;

package/src/Popover/Popover.styles.tsx

@@ -0,0 +1,96 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const popoverStyles = StyleSheet.create((theme) => ({
+  container: {
+    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+    borderRadius: theme.borderRadius?.md || 8,
+    border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    transition: 'opacity 150ms ease-out, transform 150ms ease-out',
+    transformOrigin: 'center center',
+    maxWidth: 320,
+  },
+  
+  content: {
+    padding: theme.spacing?.md || 12,
+  },
+  
+  arrow: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+    transform: 'rotate(45deg)',
+    
+    variants: {
+      placement: {
+        top: {
+          bottom: -6,
+          left: '50%',
+          marginLeft: -6,
+        },
+        'top-start': {
+          bottom: -6,
+          left: 16,
+        },
+        'top-end': {
+          bottom: -6,
+          right: 16,
+        },
+        bottom: {
+          top: -6,
+          left: '50%',
+          marginLeft: -6,
+        },
+        'bottom-start': {
+          top: -6,
+          left: 16,
+        },
+        'bottom-end': {
+          top: -6,
+          right: 16,
+        },
+        left: {
+          right: -6,
+          top: '50%',
+          marginTop: -6,
+        },
+        'left-start': {
+          right: -6,
+          top: 16,
+        },
+        'left-end': {
+          right: -6,
+          bottom: 16,
+        },
+        right: {
+          left: -6,
+          top: '50%',
+          marginTop: -6,
+        },
+        'right-start': {
+          left: -6,
+          top: 16,
+        },
+        'right-end': {
+          left: -6,
+          bottom: 16,
+        },
+      },
+    },
+    
+    _web: {
+      boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
+    },
+  },
+  
+  // Native-specific backdrop
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'transparent',
+  },
+}));