@newtonedev/components 0.1.2 → 0.1.3

package/src/Icon/Icon.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { Text, type ViewStyle, type TextStyle } from 'react-native';
-import { srgbToHex } from 'newtone';
-import { useTokens } from '../tokens/useTokens';
-import type { ElevationLevel } from '../theme/types';
-
-export interface IconProps {
-  /** Icon ligature name (e.g., 'home', 'settings', 'check') */
-  readonly name: string;
-  /** Font size in pixels (default: tokens.typography.size.base) */
-  readonly size?: number;
-  /** Optical size for variable font axis (default: same as size) */
-  readonly opticalSize?: number;
-  /** Fill state: 0=outlined, 1=filled (default: 0) */
-  readonly fill?: 0 | 1;
-  /** Icon color as hex string (default: tokens.textPrimary) */
-  readonly color?: string;
-  /** Elevation level for token computation (default: 1) */
-  readonly elevation?: ElevationLevel;
-  /** Additional styles */
-  readonly style?: ViewStyle;
-  /** Press handler */
-  readonly onPress?: () => void;
-}
-
-/**
- * Material Symbols icon component with variable font support.
- *
- * Uses global icon configuration (variant, weight, auto-grade) from theme config,
- * with per-instance control over size, fill, and color.
- *
- * @example
- * ```tsx
- * <Icon name="home" />
- * <Icon name="settings" size={24} fill={1} />
- * <Icon name="check" color="#00ff00" />
- * ```
- */
-export function Icon({
-  name,
-  size,
-  opticalSize,
-  fill = 0,
-  color,
-  elevation = 1,
-  style,
-  onPress,
-}: IconProps) {
-  const tokens = useTokens(elevation);
-
-  const fontSize = size ?? tokens.typography.size.base;
-  const opsz = opticalSize ?? fontSize;
-  const iconColor = color ?? srgbToHex(tokens.textPrimary.srgb);
-
-  // Font family varies by variant: 'Material Symbols Rounded', etc.
-  const fontFamily = `Material Symbols ${tokens.icons.variant.charAt(0).toUpperCase() + tokens.icons.variant.slice(1)}`;
-
-  // Font variation settings for Material Symbols variable font
-  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
-
-  return (
-    <Text
-      style={{
-        fontFamily,
-        fontSize,
-        color: iconColor,
-        userSelect: 'none',
-        fontVariationSettings,
-        ...style,
-      } as TextStyle}
-      onPress={onPress}
-    >
-      {name}
-    </Text>
-  );
-}