Text

import { Text, VStack } from "astralis-ui";

export function TextDemo() {
  return (
    <VStack gap="1" maxW="md">
      <Text size="lg" weight="semibold">
        Typography that stays on scale
      </Text>
      <Text color="muted">
        Text is the prose primitive — size, weight, color and spacing come
        from the token scale, and every prop takes a responsive map.
      </Text>
      <Text size="sm" color="subtle" fontStyle="italic">
        Last updated three minutes ago
      </Text>
    </VStack>
  );
}

import { Text, VStack } from "astralis-ui";

const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"] as const;

export function TextSizes() {
  return (
    <VStack gap="2" alignItems="start">
      {sizes.map((size) => (
        <Text key={size} size={size}>
          The quick brown fox ({size})
        </Text>
      ))}
    </VStack>
  );
}

import { Text, VStack } from "astralis-ui";

const weights = ["light", "normal", "medium", "semibold", "bold", "extrabold"] as const;

export function TextWeights() {
  return (
    <VStack gap="1" alignItems="start">
      {weights.map((weight) => (
        <Text key={weight} weight={weight}>
          Weight {weight}
        </Text>
      ))}
    </VStack>
  );
}

import { Text, VStack, Box } from "astralis-ui";

const long =
  "Space is big. You just won't believe how vastly, hugely, mind-bogglingly big it is. You may think it's a long way down the road to the chemist's, but that's just peanuts to space.";

export function TextTruncation() {
  return (
    <VStack gap="4" alignItems="stretch" w="full" maxW="xs">
      <Box>
        <Text size="xs" color="subtle" gutterBottom>truncate — one line, ellipsis</Text>
        <Text size="sm" truncate>{long}</Text>
      </Box>
      <Box>
        <Text size="xs" color="subtle" gutterBottom>lineClamp=&quot;3&quot;</Text>
        <Text size="sm" lineClamp="3">{long}</Text>
      </Box>
    </VStack>
  );
}

import { Text, VStack } from "astralis-ui";

export function TextStyling() {
  return (
    <VStack gap="2" alignItems="start">
      <Text casing="uppercase" letterSpacing="widest" size="xs" weight="medium" color="muted">
        Overline label
      </Text>
      <Text textDecoration="underline">Underlined for emphasis</Text>
      <Text textDecoration="line-through" color="subtle">
        Crossed off the list
      </Text>
      <Text fontFamily="mono" size="sm">
        fontFamily=&quot;mono&quot; without reaching for Code
      </Text>
      <Text color="success" weight="medium">
        Status colors come from the same token map
      </Text>
    </VStack>
  );
}