@idealyst/components 1.0.24 → 1.0.25

package/src/View/View.styles.tsx

@@ -1,103 +1,103 @@
-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: {
-        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,
-        },
-        xl: {
-          borderRadius: theme.borderRadius.xl,
-        },
-      },
-      border: {
-        none: {
-          borderWidth: 0,
-        },
-        thin: {
-          borderWidth: 1,
-          borderColor: theme.colors.border,
-        },
-        thick: {
-          borderWidth: 2,
-          borderColor: theme.colors.border,
-        },
-      },
-    },
-    // Web-specific styles
-    _web: {
-      display: 'flex',
-      flexDirection: 'column',
-      boxSizing: 'border-box',
-    },
-  },
-}));
-
+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: {
+        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,
+        },
+        xl: {
+          borderRadius: theme.borderRadius.xl,
+        },
+      },
+      border: {
+        none: {
+          borderWidth: 0,
+        },
+        thin: {
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+        },
+        thick: {
+          borderWidth: 2,
+          borderColor: theme.colors.border,
+        },
+      },
+    },
+    // Web-specific styles
+    _web: {
+      display: 'flex',
+      flexDirection: 'column',
+      boxSizing: 'border-box',
+    },
+  },
+}));
+
 export default viewStyles; 

package/src/View/View.web.tsx

@@ -1,60 +1,60 @@
-import React from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-import { ViewProps } from './types';
-import viewStyles from './View.styles';
-
-const View: React.FC<ViewProps> = ({
-  children,
-  spacing = 'none',
-  marginVariant = 'none',
-  background = 'transparent',
-  radius = 'none',  
-  border = 'none',
-  backgroundColor,
-  padding,
-  margin,
-  borderRadius,
-  borderWidth,
-  borderColor,
-  style,
-  testID,
-}) => {
-  viewStyles.useVariants({
-    spacing,
-    margin: marginVariant,
-    background,
-    radius,
-    border,
-  });
-
-  // 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;
-  if (borderRadius !== undefined) dynamicStyles.borderRadius = borderRadius;
-  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,
-  ];
-
-  // Use getWebProps to generate className and ref for web
-  const webProps = getWebProps(viewStyleArray);
-
-  return (
-    <div
-      {...webProps}
-      data-testid={testID}
-    >
-      {children}
-    </div>
-  );
-};
-
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { ViewProps } from './types';
+import viewStyles from './View.styles';
+
+const View: React.FC<ViewProps> = ({
+  children,
+  spacing = 'none',
+  marginVariant = 'none',
+  background = 'transparent',
+  radius = 'none',  
+  border = 'none',
+  backgroundColor,
+  padding,
+  margin,
+  borderRadius,
+  borderWidth,
+  borderColor,
+  style,
+  testID,
+}) => {
+  viewStyles.useVariants({
+    spacing,
+    margin: marginVariant,
+    background,
+    radius,
+    border,
+  });
+
+  // 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;
+  if (borderRadius !== undefined) dynamicStyles.borderRadius = borderRadius;
+  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,
+  ];
+
+  // Use getWebProps to generate className and ref for web
+  const webProps = getWebProps(viewStyleArray);
+
+  return (
+    <div
+      {...webProps}
+      data-testid={testID}
+    >
+      {children}
+    </div>
+  );
+};
+
 export default View; 

package/src/View/index.native.ts

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

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';
+// 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'; 

package/src/View/index.web.ts

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

package/src/View/types.ts

@@ -1,73 +1,73 @@
-import { ReactNode } from 'react';
-
-export interface ViewProps {
-  /**
-   * The content to display inside the view
-   */
-  children?: ReactNode;
-  
-  /**
-   * Padding variant
-   */
-  spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /**
-   * Margin variant
-   */
-  marginVariant?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /**
-   * Background variant
-   */
-  background?: 'transparent' | 'surface' | 'primary' | 'secondary';
-  
-  /**
-   * Border radius variant
-   */
-  radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /**
-   * Border variant
-   */
-  border?: 'none' | 'thin' | 'thick';
-  
-  /**
-   * 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;
-  
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
+import { ReactNode } from 'react';
+
+export interface ViewProps {
+  /**
+   * The content to display inside the view
+   */
+  children?: ReactNode;
+  
+  /**
+   * Padding variant
+   */
+  spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * Margin variant
+   */
+  marginVariant?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * Background variant
+   */
+  background?: 'transparent' | 'surface' | 'primary' | 'secondary';
+  
+  /**
+   * Border radius variant
+   */
+  radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * Border variant
+   */
+  border?: 'none' | 'thin' | 'thick';
+  
+  /**
+   * 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;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
 } 

package/src/examples/AllExamples.tsx

@@ -1,72 +1,72 @@
-import React from 'react';
-import { Screen, View, Text, Divider } from '../index';
-import { ButtonExamples } from './ButtonExamples';
-import { TextExamples } from './TextExamples';
-import { ViewExamples } from './ViewExamples';
-import { InputExamples } from './InputExamples';
-import { IconExamples } from './IconExamples';
-import { CardExamples } from './CardExamples';
-import { CheckboxExamples } from './CheckboxExamples';
-import { DividerExamples } from './DividerExamples';
-import { BadgeExamples } from './BadgeExamples';
-import { AvatarExamples } from './AvatarExamples';
-import { ScreenExamples } from './ScreenExamples';
-import { ThemeExtensionExamples } from './ThemeExtensionExamples';
-
-export const AllExamples = () => {
-  return (
-    <Screen background="primary" padding="xl">
-      <View spacing="none" style={{ maxWidth: 800, alignSelf: 'center' }}>
-      <Text size="xlarge" weight="bold" align="center" color="primary">
-        Idealyst Component Library Examples
-      </Text>
-      <Text size="medium" align="center" color="secondary">
-        Comprehensive showcase of all available components
-      </Text>
-      
-      <Divider spacing="large" intent="primary">
-        <Text size="small" weight="semibold" color="primary">COMPONENTS</Text>
-      </Divider>
-      
-      <ButtonExamples />
-      <Divider spacing="medium" />
-      
-      <TextExamples />
-      <Divider spacing="medium" />
-      
-      <ViewExamples />
-      <Divider spacing="medium" />
-      
-      <InputExamples />
-      <Divider spacing="medium" />
-      
-      <IconExamples />
-      <Divider spacing="medium" />
-      
-      <CardExamples />
-      <Divider spacing="medium" />
-      
-      <CheckboxExamples />
-      <Divider spacing="medium" />
-      
-      <DividerExamples />
-      <Divider spacing="medium" />
-      
-      <BadgeExamples />
-      <Divider spacing="medium" />
-      
-      <AvatarExamples />
-      <Divider spacing="medium" />
-      
-      <ScreenExamples />
-      <Divider spacing="medium" />
-
-      <Divider spacing="large" intent="success">
-        <Text size="small" weight="semibold" color="green">THEME SYSTEM</Text>
-      </Divider>
-      
-      <ThemeExtensionExamples />
-    </View>
-    </Screen>
-  );
+import React from 'react';
+import { Screen, View, Text, Divider } from '../index';
+import { ButtonExamples } from './ButtonExamples';
+import { TextExamples } from './TextExamples';
+import { ViewExamples } from './ViewExamples';
+import { InputExamples } from './InputExamples';
+import { IconExamples } from './IconExamples';
+import { CardExamples } from './CardExamples';
+import { CheckboxExamples } from './CheckboxExamples';
+import { DividerExamples } from './DividerExamples';
+import { BadgeExamples } from './BadgeExamples';
+import { AvatarExamples } from './AvatarExamples';
+import { ScreenExamples } from './ScreenExamples';
+import { ThemeExtensionExamples } from './ThemeExtensionExamples';
+
+export const AllExamples = () => {
+  return (
+    <Screen background="primary" padding="xl">
+      <View spacing="none" style={{ maxWidth: 800, alignSelf: 'center' }}>
+      <Text size="xlarge" weight="bold" align="center" color="primary">
+        Idealyst Component Library Examples
+      </Text>
+      <Text size="medium" align="center" color="secondary">
+        Comprehensive showcase of all available components
+      </Text>
+      
+      <Divider spacing="large" intent="primary">
+        <Text size="small" weight="semibold" color="primary">COMPONENTS</Text>
+      </Divider>
+      
+      <ButtonExamples />
+      <Divider spacing="medium" />
+      
+      <TextExamples />
+      <Divider spacing="medium" />
+      
+      <ViewExamples />
+      <Divider spacing="medium" />
+      
+      <InputExamples />
+      <Divider spacing="medium" />
+      
+      <IconExamples />
+      <Divider spacing="medium" />
+      
+      <CardExamples />
+      <Divider spacing="medium" />
+      
+      <CheckboxExamples />
+      <Divider spacing="medium" />
+      
+      <DividerExamples />
+      <Divider spacing="medium" />
+      
+      <BadgeExamples />
+      <Divider spacing="medium" />
+      
+      <AvatarExamples />
+      <Divider spacing="medium" />
+      
+      <ScreenExamples />
+      <Divider spacing="medium" />
+
+      <Divider spacing="large" intent="success">
+        <Text size="small" weight="semibold" color="green">THEME SYSTEM</Text>
+      </Divider>
+      
+      <ThemeExtensionExamples />
+    </View>
+    </Screen>
+  );
 };