@idealyst/components 1.0.0

package/src/Divider/types.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import type { IntentVariant } from '../theme/variants';
+
+export interface DividerProps {
+  /**
+   * The orientation of the divider
+   */
+  orientation?: 'horizontal' | 'vertical';
+  
+  /**
+   * The visual style variant of the divider
+   */
+  variant?: 'solid' | 'dashed' | 'dotted';
+  
+  /**
+   * The thickness of the divider
+   */
+  thickness?: 'thin' | 'medium' | 'thick';
+  
+  /**
+   * The color intent of the divider
+   */
+  intent?: IntentVariant;
+  
+  /**
+   * The length of the divider (percentage or fixed)
+   */
+  length?: 'full' | 'auto' | number;
+  
+  /**
+   * Spacing around the divider
+   */
+  spacing?: 'none' | 'small' | 'medium' | 'large';
+  
+  /**
+   * Content to display in the center of the divider (for horizontal dividers)
+   */
+  children?: ReactNode;
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+  
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+} 

package/src/Icon/Icon.native.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { IconProps } from './types';
+import iconStyles from './Icon.styles';
+
+const Icon: React.FC<IconProps> = ({
+  name,
+  size = 'md',
+  color,
+  style,
+  testID,
+  accessibilityLabel,
+}: IconProps) => {
+  
+  // Use Unistyles v3 with color and size variants
+  const styles = iconStyles.useVariants({ color, size });
+  
+  // Map size variants to pixel values
+  const sizeMap = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48,
+  };
+  const iconSize = sizeMap[size];
+  
+  return (
+    <MaterialCommunityIcons
+      name={name}
+      size={iconSize}
+      style={[styles.icon, style]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+    />
+  );
+};
+
+export default Icon; 

package/src/Icon/Icon.styles.tsx

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { generateColorVariants } from '../theme/variantHelpers';
+
+const iconStyles = StyleSheet.create((theme) => ({
+  icon: {
+    // Default size (medium)
+    width: 24,
+    height: 24,
+    
+    // Default theme-based color
+    color: theme.colors?.text || '#000000',
+    
+    // Variants for different color schemes and sizes
+    variants: {
+      // Dynamically generated color variants using generateColorVariants helper
+      color: generateColorVariants(theme),
+      size: {
+        xs: {
+          width: 12,
+          height: 12,
+        },
+        sm: {
+          width: 16,
+          height: 16,
+        },
+        md: {
+          width: 24,
+          height: 24,
+        },
+        lg: {
+          width: 32,
+          height: 32,
+        },
+        xl: {
+          width: 48,
+          height: 48,
+        },
+      },
+    },
+    
+    // Web-specific styles
+    _web: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      flexShrink: 0,
+    },
+  },
+}));
+
+export default iconStyles;

package/src/Icon/Icon.web.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import MdiIcon from '@mdi/react';
+import { IconProps } from './types';
+import iconStyles from './Icon.styles';
+import { getWebProps } from 'react-native-unistyles/web';
+
+// Internal props that include the transformed path from Babel plugin
+interface InternalIconProps extends IconProps {
+  path?: string; // Added by Babel plugin transformation
+}
+
+const Icon: React.FC<IconProps> = (props: InternalIconProps) => {
+  const {
+    name,
+    size = 'md',
+    color,
+    style,
+    testID,
+    accessibilityLabel,
+    ...restProps
+  } = props;
+
+  // Use Unistyles v3 with color and size variants
+  const styles = iconStyles.useVariants({ color, size });
+  console.log(styles);
+  
+  // Check if we have a path prop (from Babel plugin transformation)
+  const { path } = restProps as { path?: string };
+  const iconProps = getWebProps(styles.icon);
+  
+  // Use MDI React icon when path is provided (transformed by Babel plugin)
+  return (
+    <div
+      {...iconProps}>
+      <MdiIcon
+        path={path}
+        size={'100%'}
+        color={'currentColor'}
+        data-testid={testID}
+        aria-label={accessibilityLabel || name}
+      />
+    </div>
+  );
+  
+};
+
+export default Icon;