Box

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

export function BoxDemo() {
  return (
    <Box bg="subtle" p="6" rounded="xl" border="normal" borderColor="base" shadow="sm" maxW="sm">
      <Text weight="semibold">A humble Box</Text>
      <Text size="sm" color="muted">
        Every layout primitive in Astralis builds on this: spacing, sizing,
        color, borders and radius as typed token props.
      </Text>
    </Box>
  );
}

import { Box, HStack } from "astralis-ui";

export function BoxStyleProps() {
  return (
    <HStack gap="4" wrap="wrap" justifyContent="center">
      <Box bg="brand-subtle" size="16" rounded="md" />
      <Box bg="brand-muted" size="16" rounded="lg" />
      <Box bg="brand" size="16" rounded="xl" shadow="md" />
      <Box bg="transparent" size="16" rounded="xl" border="thick" borderColor="brand" />
      <Box bg="inverted" size="16" rounded="full" />
    </HStack>
  );
}

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

export function BoxResponsive() {
  return (
    <Box
      bg="green-subtle"
      rounded={{ base: "md", md: "2xl" }}
      p={{ base: "4", md: "8", lg: "12" }}
    >
      <Text size="sm" color="muted">
        Resize the window: padding and radius step up at md and lg.
      </Text>
    </Box>
  );
}

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

export function BoxAs() {
  return (
    /* Renders a semantic <aside>; any element or component works. */
    <Box as="aside" bg="blue-subtle" p="5" rounded="lg" maxW="md">
      <Text size="sm" weight="medium">
        Did you know?
      </Text>
      <Text size="sm" color="muted">
        Box is polymorphic: the `as` prop swaps the rendered element while
        keeping every style prop.
      </Text>
    </Box>
  );
}