List

"use client";

import { List } from "astralis-ui";

export function ListDemo() {
  return (
    <List>
      <List.Item>Semantic tokens over raw colors</List.Item>
      <List.Item>Responsive props on every primitive</List.Item>
      <List.Item>Precompiled CSS — no build step</List.Item>
    </List>
  );
}

"use client";

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

const styleTypes = ["disc", "circle", "square", "decimal", "lower-alpha", "upper-roman"] as const;

export function ListStyleTypes() {
  return (
    <Grid columns={{ base: "2", md: "3" }} gap="6" w="full" maxW="md">
      {styleTypes.map((styleType) => (
        <VStack key={styleType} gap="1" alignItems="start">
          <Text as="span" size="xs" color="subtle">{styleType}</Text>
          {/* Ordered markers belong on an <ol> — as swaps the element. */}
          <List styleType={styleType} as={styleType === "disc" || styleType === "circle" || styleType === "square" ? "ul" : "ol"} spacing="1">
            <List.Item>One</List.Item>
            <List.Item>Two</List.Item>
            <List.Item>Three</List.Item>
          </List>
        </VStack>
      ))}
    </Grid>
  );
}

"use client";

import { List, Icon } from "astralis-ui";
import { CircleCheck, CircleAlert, CircleX } from "lucide-react";

export function ListIcons() {
  return (
    /* styleType="none" + per-item icons — the changelog/feature-list recipe. */
    <List styleType="none" spacing="2.5">
      <List.Item icon={<Icon as={CircleCheck} size="sm" color="success" />}>
        Layout category fully documented
      </List.Item>
      <List.Item icon={<Icon as={CircleCheck} size="sm" color="success" />}>
        Typography in progress
      </List.Item>
      <List.Item icon={<Icon as={CircleAlert} size="sm" color="warning" />}>
        Overlay components waiting on rework
      </List.Item>
      <List.Item icon={<Icon as={CircleX} size="sm" color="error" />}>
        Time machine still not shipping
      </List.Item>
    </List>
  );
}