Text Align

import type { ComponentPropsWithoutRef } from "react";
 
import { Group, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <DemoItem textAlign="start">
        Duis id tellus condimentum, tincidunt nulla a, pellentesque dolor. Etiam
        tristique est eu sodales pellentesque. Sed odio eros, mattis a turpis
        non, vulputate bibendum mauris.
      </DemoItem>
      <DemoItem textAlign="center">
        Duis id tellus condimentum, tincidunt nulla a, pellentesque dolor. Etiam
        tristique est eu sodales pellentesque. Sed odio eros, mattis a turpis
        non, vulputate bibendum mauris.
      </DemoItem>
      <DemoItem textAlign="end">
        Duis id tellus condimentum, tincidunt nulla a, pellentesque dolor. Etiam
        tristique est eu sodales pellentesque. Sed odio eros, mattis a turpis
        non, vulputate bibendum mauris.
      </DemoItem>
      <DemoItem textAlign="justify">
        Duis id tellus condimentum, tincidunt nulla a, pellentesque dolor. Etiam
        tristique est eu sodales pellentesque. Sed odio eros, mattis a turpis
        non, vulputate bibendum mauris.
      </DemoItem>
    </Group>
  );
}
 
function DemoItem({
  children,
  textAlign,
}: Pick<ComponentPropsWithoutRef<typeof Text>, "children"> & {
  textAlign: Extract<
    ComponentPropsWithoutRef<typeof Text>["textAlign"],
    string
  >;
}) {
  return (
    <div>
      <Text color="fg.tertiary" fontFamily="mono" fontWeight="600">
        {textAlign}
      </Text>
      <Text textAlign={textAlign}>{children}</Text>
    </div>
  );
}

import { Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Text textAlign={["center", "start"]} w="full">
      Duis id tellus condimentum, tincidunt nulla a, pellentesque dolor. Etiam
      tristique est eu sodales pellentesque.
    </Text>
  );
}