Typography Components

/**
 * Primary text component with styling and theme integration
 * @param props - Text component props
 * @returns JSX element representing styled text
 */
function Text(props: ITextProps): JSX.Element;

interface ITextProps extends StyledProps {
  children?: React.ReactNode;
  // Typography props
  fontSize?: ResponsiveValue<string | number>;
  fontWeight?: ResponsiveValue<string | number>;
  fontFamily?: ResponsiveValue<string>;
  lineHeight?: ResponsiveValue<string | number>;
  letterSpacing?: ResponsiveValue<string | number>;
  textAlign?: ResponsiveValue<"left" | "right" | "center" | "justify">;
  textTransform?: ResponsiveValue<"none" | "capitalize" | "uppercase" | "lowercase">;
  textDecoration?: ResponsiveValue<"none" | "underline" | "line-through">;
  textDecorationLine?: ResponsiveValue<"none" | "underline" | "line-through" | "underline line-through">;
  textDecorationStyle?: ResponsiveValue<"solid" | "double" | "dotted" | "dashed">;
  textDecorationColor?: ResponsiveValue<string>;
  textShadowColor?: ResponsiveValue<string>;
  textShadowOffset?: ResponsiveValue<{ width: number; height: number }>;
  textShadowRadius?: ResponsiveValue<number>;
  
  // Color props
  color?: ResponsiveValue<string>;
  
  // Responsive text props
  isTruncated?: boolean;
  noOfLines?: number;
  
  // Text-specific props
  bold?: boolean;
  italic?: boolean;
  underline?: boolean;
  strikeThrough?: boolean;
  sub?: boolean;
  sup?: boolean;
  highlight?: boolean;
  
  // React Native Text props
  allowFontScaling?: boolean;
  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
  numberOfLines?: number;
  onPress?: () => void;
  onLongPress?: () => void;
  selectable?: boolean;
  selectionColor?: string;
  suppressHighlighting?: boolean;
  testID?: string;
  
  // Accessibility props
  accessible?: boolean;
  accessibilityLabel?: string;
  accessibilityHint?: string;
  accessibilityRole?: string;
}

import { Text, VStack } from "native-base";

function TypographyExample() {
  return (
    <VStack space={4}>
      {/* Basic text */}
      <Text>Basic text content</Text>
      
      {/* Styled text */}
      <Text fontSize="lg" fontWeight="bold" color="blue.500">
        Large bold blue text
      </Text>
      
      {/* Responsive text */}
      <Text 
        fontSize={{ base: "sm", md: "lg" }} 
        textAlign={{ base: "center", md: "left" }}
      >
        Responsive text size and alignment
      </Text>
      
      {/* Truncated text */}
      <Text isTruncated maxW="200">
        This is a very long text that will be truncated when it exceeds the maximum width
      </Text>
      
      {/* Multi-line text with line limit */}
      <Text noOfLines={2}>
        This is a longer text that will be limited to exactly two lines and will show ellipsis when the content exceeds this limit
      </Text>
      
      {/* Text with styling shortcuts */}
      <Text bold italic underline color="green.600">
        Bold, italic, underlined text
      </Text>
      
      {/* Interactive text */}
      <Text onPress={() => console.log('Text pressed')} color="blue.400" underline>
        Pressable text link
      </Text>
    </VStack>
  );
}

/**
 * Semantic heading component with predefined typography scales
 * @param props - Heading component props
 * @returns JSX element representing a semantic heading
 */
function Heading(props: IHeadingProps): JSX.Element;

interface IHeadingProps extends ITextProps {
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
}

import { Heading, VStack } from "native-base";

function HeadingExample() {
  return (
    <VStack space={4}>
      {/* Different heading sizes */}
      <Heading size="4xl">Main Title (4xl)</Heading>
      <Heading size="3xl">Section Title (3xl)</Heading>
      <Heading size="2xl">Subsection Title (2xl)</Heading>
      <Heading size="xl">Heading XL</Heading>
      <Heading size="lg">Heading Large</Heading>
      <Heading size="md">Heading Medium</Heading>
      <Heading size="sm">Heading Small</Heading>
      <Heading size="xs">Heading XS</Heading>
      
      {/* Styled headings */}
      <Heading size="xl" color="primary.600" textAlign="center">
        Centered Primary Heading
      </Heading>
      
      {/* Responsive heading */}
      <Heading 
        size={{ base: "lg", md: "xl", lg: "2xl" }}
        color={{ base: "gray.800", dark: "gray.100" }}
      >
        Responsive Heading
      </Heading>
    </VStack>
  );
}

// Theme typography tokens
const theme = extendTheme({
  fonts: {
    heading: "Inter",
    body: "Inter",
    mono: "Menlo",
  },
  fontSizes: {
    xs: 12,
    sm: 14,
    md: 16,
    lg: 18,
    xl: 20,
    "2xl": 24,
    "3xl": 30,
    "4xl": 36,
  },
  fontWeights: {
    hairline: 100,
    thin: 200,                    
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  },
  lineHeights: {
    xs: "16px",
    sm: "20px", 
    md: "24px",
    lg: "28px",
    xl: "32px",
  },
  letterSpacing: {
    xs: "-0.05em",
    sm: "-0.025em",
    md: "0",
    lg: "0.025em",
    xl: "0.05em",
  }
});

import { Text, useBreakpointValue } from "native-base";

function ResponsiveTypography() {
  const textSize = useBreakpointValue({
    base: "sm",
    sm: "md",
    md: "lg",
    lg: "xl"
  });
  
  return (
    <Text fontSize={textSize}>
      This text size adapts to screen breakpoints
    </Text>
  );
}

import { Text, Heading } from "native-base";

function AccessibleTypography() {
  return (
    <>
      <Heading 
        accessibilityRole="header"
        accessibilityLabel="Main page heading"
      >
        Page Title
      </Heading>
      
      <Text 
        accessibilityLabel="Article content"
        selectable={true}
        allowFontScaling={true}
      >
        This text is accessible and supports font scaling
      </Text>
    </>
  );
}

import { Text, Heading, useColorModeValue } from "native-base";

function ThemedTypography() {
  const textColor = useColorModeValue("gray.800", "gray.100");
  const headingColor = useColorModeValue("gray.900", "gray.50");
  
  return (
    <>
      <Heading color={headingColor}>
        Theme-aware heading
      </Heading>
      <Text color={textColor}>
        Theme-aware body text
      </Text>
      
      {/* Or use theme-aware props directly */}
      <Text color={{ base: "gray.800", _dark: "gray.100" }}>
        Direct theme-aware text
      </Text>
    </>
  );
}

import { VStack, Heading, Text, Divider } from "native-base";

function TypographyComposition() {
  return (
    <VStack space={4}>
      {/* Article header */}
      <VStack space={2}>
        <Heading size="2xl" color="primary.600">
          Article Title
        </Heading>
        <Text fontSize="sm" color="gray.500">
          Published on March 15, 2024
        </Text>
        <Divider />
      </VStack>
      
      {/* Article content */}
      <VStack space={3}>
        <Text fontSize="lg" lineHeight="xl">
          This is the article introduction with larger text and increased line height for better readability.
        </Text>
        
        <Heading size="lg">Section Heading</Heading>
        
        <Text>
          Regular body text with default styling. This text maintains consistent spacing and typography throughout the article.
        </Text>
        
        <Text italic color="gray.600" fontSize="sm">
          This is a caption or note in smaller, italic text.
        </Text>
      </VStack>
    </VStack>
  );
}

import { Text, Platform } from "native-base";

function PlatformTypography() {
  return (
    <Text 
      fontFamily={Platform.OS === 'ios' ? 'San Francisco' : 'Roboto'}
      fontSize={{ base: "md", web: "lg" }}
    >
      Platform-optimized typography
    </Text>
  );
}