@idealyst/components 1.0.24 → 1.0.25

package/src/Input/Input.web.tsx

@@ -1,71 +1,71 @@
-import React from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-import { InputProps } from './types';
-import { inputStyles } from './Input.styles';
-
-const Input: React.FC<InputProps> = ({
-  value,
-  onChangeText,
-  placeholder,
-  disabled = false,
-  inputType = 'text',
-  secureTextEntry = false,
-  autoCapitalize = 'sentences',
-  size = 'medium',
-  variant = 'default',
-  hasError = false,
-  style,
-  testID,
-}) => {
-  const getInputType = () => {
-    switch (inputType) {
-      case 'email':
-        return 'email';
-      case 'number':
-        return 'number';
-      case 'password':
-        return 'password';
-      case 'text':
-      default:
-        return 'text';
-    }
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (onChangeText) {
-      onChangeText(e.target.value);
-    }
-  };
-
-  // Apply variants using the correct Unistyles 3.0 pattern
-  inputStyles.useVariants({
-    size: size as 'small' | 'medium' | 'large',
-    variant: variant as 'default' | 'outlined' | 'filled',
-  });
-
-  // Create the style array following the official documentation pattern
-  const inputStyleArray = [
-    inputStyles.input,
-    disabled && inputStyles.disabled,
-    hasError && inputStyles.error,
-    style,
-  ].filter(Boolean);
-
-  // Use getWebProps to generate className and ref for web
-  const webProps = getWebProps(inputStyleArray);
-
-  return (
-    <input
-      {...webProps}
-      type={secureTextEntry ? 'password' : getInputType()}
-      value={value}
-      onChange={handleChange}
-      placeholder={placeholder}
-      disabled={disabled}
-      autoCapitalize={autoCapitalize}
-      data-testid={testID}
-    />
-  );
-};
-
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { InputProps } from './types';
+import { inputStyles } from './Input.styles';
+
+const Input: React.FC<InputProps> = ({
+  value,
+  onChangeText,
+  placeholder,
+  disabled = false,
+  inputType = 'text',
+  secureTextEntry = false,
+  autoCapitalize = 'sentences',
+  size = 'medium',
+  variant = 'default',
+  hasError = false,
+  style,
+  testID,
+}) => {
+  const getInputType = () => {
+    switch (inputType) {
+      case 'email':
+        return 'email';
+      case 'number':
+        return 'number';
+      case 'password':
+        return 'password';
+      case 'text':
+      default:
+        return 'text';
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChangeText) {
+      onChangeText(e.target.value);
+    }
+  };
+
+  // Apply variants using the correct Unistyles 3.0 pattern
+  inputStyles.useVariants({
+    size: size as 'small' | 'medium' | 'large',
+    variant: variant as 'default' | 'outlined' | 'filled',
+  });
+
+  // Create the style array following the official documentation pattern
+  const inputStyleArray = [
+    inputStyles.input,
+    disabled && inputStyles.disabled,
+    hasError && inputStyles.error,
+    style,
+  ].filter(Boolean);
+
+  // Use getWebProps to generate className and ref for web
+  const webProps = getWebProps(inputStyleArray);
+
+  return (
+    <input
+      {...webProps}
+      type={secureTextEntry ? 'password' : getInputType()}
+      value={value}
+      onChange={handleChange}
+      placeholder={placeholder}
+      disabled={disabled}
+      autoCapitalize={autoCapitalize}
+      data-testid={testID}
+    />
+  );
+};
+
 export default Input; 

package/src/Input/index.native.ts

@@ -1,3 +1,3 @@
-// React Native-specific Input export
-export { default } from './Input.native';
+// React Native-specific Input export
+export { default } from './Input.native';
 export * from './types'; 

package/src/Input/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic Input 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 './Input.web';
+// Platform-agnostic Input 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 './Input.web';
 export * from './types'; 

package/src/Input/index.web.ts

@@ -1,3 +1,3 @@
-// Web-specific Input export
-export { default } from './Input.web';
+// Web-specific Input export
+export { default } from './Input.web';
 export * from './types'; 

package/src/Input/types.ts

@@ -1,69 +1,69 @@
-import type { IntentVariant } from '../theme/variants';
-
-export interface InputProps {
-  /**
-   * The current value of the input
-   */
-  value?: string;
-  
-  /**
-   * Called when the text changes
-   */
-  onChangeText?: (text: string) => void;
-  
-  /**
-   * Placeholder text
-   */
-  placeholder?: string;
-  
-  /**
-   * Whether the input is disabled
-   */
-  disabled?: boolean;
-  
-  /**
-   * The type of input (affects keyboard type on mobile)
-   */
-  inputType?: 'text' | 'email' | 'password' | 'number';
-  
-  /**
-   * Whether to show the password
-   */
-  secureTextEntry?: boolean;
-  
-  /**
-   * Auto-capitalization behavior
-   */
-  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-  
-  /**
-   * Size variant of the input
-   */
-  size?: 'small' | 'medium' | 'large';
-  
-  /**
-   * Style variant of the input
-   */
-  variant?: 'default' | 'outlined' | 'filled';
-  
-  /**
-   * The intent/color scheme of the input (for focus states, validation, etc.)
-   */
-  intent?: IntentVariant;
-  
-  /**
-   * Whether the input has an error state
-   * @deprecated Use intent="error" instead
-   */
-  hasError?: boolean;
-  
-  /**
-   * Additional styles (platform-specific)
-   */
-  style?: any;
-  
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
+import type { IntentVariant } from '../theme/variants';
+
+export interface InputProps {
+  /**
+   * The current value of the input
+   */
+  value?: string;
+  
+  /**
+   * Called when the text changes
+   */
+  onChangeText?: (text: string) => void;
+  
+  /**
+   * Placeholder text
+   */
+  placeholder?: string;
+  
+  /**
+   * Whether the input is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * The type of input (affects keyboard type on mobile)
+   */
+  inputType?: 'text' | 'email' | 'password' | 'number';
+  
+  /**
+   * Whether to show the password
+   */
+  secureTextEntry?: boolean;
+  
+  /**
+   * Auto-capitalization behavior
+   */
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  
+  /**
+   * Size variant of the input
+   */
+  size?: 'small' | 'medium' | 'large';
+  
+  /**
+   * Style variant of the input
+   */
+  variant?: 'default' | 'outlined' | 'filled';
+  
+  /**
+   * The intent/color scheme of the input (for focus states, validation, etc.)
+   */
+  intent?: IntentVariant;
+  
+  /**
+   * Whether the input has an error state
+   * @deprecated Use intent="error" instead
+   */
+  hasError?: boolean;
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
 } 

package/src/Screen/Screen.native.tsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import { View as RNView, ScrollView as RNScrollView } from 'react-native';
-import { ScreenProps } from './types';
-import { screenStyles } from './Screen.styles';
-
-const Screen: React.FC<ScreenProps> = ({
-  children,
-  background = 'primary',
-  padding = 'md',
-  safeArea = false,
-  scrollable = true,
-  style,
-  testID,
-}) => {
-  screenStyles.useVariants({
-    background,
-    padding,
-    safeArea,
-  });
-
-  const screenStyleArray = [
-    screenStyles.screen,
-    style,
-  ];
-
-  if (scrollable) {
-    return (
-      <RNScrollView style={screenStyleArray} testID={testID}>
-        {children}
-      </RNScrollView>
-    );
-  }
-
-  return (
-    <RNView style={screenStyleArray} testID={testID}>
-      {children}
-    </RNView>
-  );
-};
-
+import React from 'react';
+import { View as RNView, ScrollView as RNScrollView } from 'react-native';
+import { ScreenProps } from './types';
+import { screenStyles } from './Screen.styles';
+
+const Screen: React.FC<ScreenProps> = ({
+  children,
+  background = 'primary',
+  padding = 'md',
+  safeArea = false,
+  scrollable = true,
+  style,
+  testID,
+}) => {
+  screenStyles.useVariants({
+    background,
+    padding,
+    safeArea,
+  });
+
+  const screenStyleArray = [
+    screenStyles.screen,
+    style,
+  ];
+
+  if (scrollable) {
+    return (
+      <RNScrollView style={screenStyleArray} testID={testID}>
+        {children}
+      </RNScrollView>
+    );
+  }
+
+  return (
+    <RNView style={screenStyleArray} testID={testID}>
+      {children}
+    </RNView>
+  );
+};
+
 export default Screen; 

package/src/Screen/Screen.styles.tsx

@@ -1,60 +1,60 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-export const screenStyles = StyleSheet.create((theme) => ({
-  screen: {
-    flex: 1,
-    // Default background color as fallback
-    backgroundColor: theme.colors.surface.primary,
-    variants: {
-      background: {
-        primary: {
-          backgroundColor: theme.colors.surface.primary,
-        },
-        secondary: {
-          backgroundColor: theme.colors.surface.secondary,
-        },
-        tertiary: {
-          backgroundColor: theme.colors.surface.tertiary,
-        },
-        inverse: {
-          backgroundColor: theme.colors.surface.inverse,
-        },
-      },
-      padding: {
-        none: {
-          padding: 0,
-        },
-        sm: {
-          padding: theme.spacing.sm,
-        },
-        md: {
-          padding: theme.spacing.md,
-        },
-        lg: {
-          padding: theme.spacing.lg,
-        },
-        xl: {
-          padding: theme.spacing.xl,
-        },
-      },
-      safeArea: {
-        true: {
-          paddingTop: theme.spacing.lg, // Safe area top
-          paddingBottom: theme.spacing.lg, // Safe area bottom
-        },
-        false: {
-          paddingTop: 0,
-          paddingBottom: 0,
-        },
-      },
-    },
-    // Web-specific styles
-    _web: {
-      overflow: 'auto',
-      display: 'flex',
-      flexDirection: 'column',
-      minHeight: '100%',
-      boxSizing: 'border-box',
-    },
-  },
+import { StyleSheet } from 'react-native-unistyles';
+
+export const screenStyles = StyleSheet.create((theme) => ({
+  screen: {
+    flex: 1,
+    // Default background color as fallback
+    backgroundColor: theme.colors.surface.primary,
+    variants: {
+      background: {
+        primary: {
+          backgroundColor: theme.colors.surface.primary,
+        },
+        secondary: {
+          backgroundColor: theme.colors.surface.secondary,
+        },
+        tertiary: {
+          backgroundColor: theme.colors.surface.tertiary,
+        },
+        inverse: {
+          backgroundColor: theme.colors.surface.inverse,
+        },
+      },
+      padding: {
+        none: {
+          padding: 0,
+        },
+        sm: {
+          padding: theme.spacing.sm,
+        },
+        md: {
+          padding: theme.spacing.md,
+        },
+        lg: {
+          padding: theme.spacing.lg,
+        },
+        xl: {
+          padding: theme.spacing.xl,
+        },
+      },
+      safeArea: {
+        true: {
+          paddingTop: theme.spacing.lg, // Safe area top
+          paddingBottom: theme.spacing.lg, // Safe area bottom
+        },
+        false: {
+          paddingTop: 0,
+          paddingBottom: 0,
+        },
+      },
+    },
+    // Web-specific styles
+    _web: {
+      overflow: 'auto',
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: '100%',
+      boxSizing: 'border-box',
+    },
+  },
 })); 

package/src/Screen/Screen.web.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-import { ScreenProps } from './types';
-import { screenStyles } from './Screen.styles';
-
-const Screen: React.FC<ScreenProps> = ({
-  children,
-  background = 'primary',
-  padding = 'md',
-  safeArea = false,
-  style,
-  testID,
-}) => {
-  screenStyles.useVariants({
-    background,
-    padding,
-    safeArea,
-  });
-
-  // Use getWebProps to generate className and ref for web
-  const webProps = getWebProps([screenStyles.screen, style]);
-
-  return (
-    <div
-      {...webProps}
-      data-testid={testID}
-    >
-      {children}
-    </div>
-  );
-};
-
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { ScreenProps } from './types';
+import { screenStyles } from './Screen.styles';
+
+const Screen: React.FC<ScreenProps> = ({
+  children,
+  background = 'primary',
+  padding = 'md',
+  safeArea = false,
+  style,
+  testID,
+}) => {
+  screenStyles.useVariants({
+    background,
+    padding,
+    safeArea,
+  });
+
+  // Use getWebProps to generate className and ref for web
+  const webProps = getWebProps([screenStyles.screen, style]);
+
+  return (
+    <div
+      {...webProps}
+      data-testid={testID}
+    >
+      {children}
+    </div>
+  );
+};
+
 export default Screen; 

package/src/Screen/index.native.ts

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

package/src/Screen/index.ts

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

package/src/Screen/index.web.ts

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

package/src/Screen/types.ts

@@ -1,38 +1,38 @@
-import { ReactNode } from 'react';
-
-export interface ScreenProps {
-  /**
-   * The content to display inside the screen
-   */
-  children?: ReactNode;
-  
-  /**
-   * Background variant - controls the background color
-   */
-  background?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
-  
-  /**
-   * Screen padding variant
-   */
-  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /**
-   * Safe area padding for mobile devices
-   */
-  safeArea?: boolean;
-  
-  /**
-   * Additional styles (platform-specific)
-   */
-  style?: any;
-  
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
-
-  /**
-   * Scrollable content
-   */
-  scrollable?: boolean;
+import { ReactNode } from 'react';
+
+export interface ScreenProps {
+  /**
+   * The content to display inside the screen
+   */
+  children?: ReactNode;
+  
+  /**
+   * Background variant - controls the background color
+   */
+  background?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+  
+  /**
+   * Screen padding variant
+   */
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * Safe area padding for mobile devices
+   */
+  safeArea?: boolean;
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+
+  /**
+   * Scrollable content
+   */
+  scrollable?: boolean;
 }