Spinner

import { Spinner } from "chakra-ui-solid";

export default function SpinnerBasic() {
  return <Spinner size="sm" />;
}

import { HStack, Spinner } from "chakra-ui-solid";

export default function SpinnerWithSizes() {
  return (
    <HStack gap="5">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </HStack>
  );
}

import { Spinner, Stack } from "chakra-ui-solid";

/**
 * The ten palettes written out, where the React version maps over a list.
 *
 * `colorPalette` is deliberately absent from the preset's `staticCss` — see the comment on it in
 * `packages/panda-preset/src/preset.ts` — so its rules come from Panda reading this file. A palette
 * it can only know at runtime reaches the element as a class with no rule, and every spinner here
 * renders in the default colour with nothing to say so (`CLAUDE.md`, *The hazard*). A literal
 * forwarded through a wrapper extracts fine, which is what `PaletteRow` is.
 */
export default function SpinnerWithColors() {
  return (
    <Stack gap="2" align="flex-start">
      <PaletteRow colorPalette="gray" />
      <PaletteRow colorPalette="red" />
      <PaletteRow colorPalette="green" />
      <PaletteRow colorPalette="blue" />
      <PaletteRow colorPalette="teal" />
      <PaletteRow colorPalette="pink" />
      <PaletteRow colorPalette="purple" />
      <PaletteRow colorPalette="cyan" />
      <PaletteRow colorPalette="orange" />
      <PaletteRow colorPalette="yellow" />
    </Stack>
  );
}

const PaletteRow = (props: { colorPalette: string }) => (
  <Stack align="center" direction="row" gap="10" px="4" colorPalette={props.colorPalette}>
    <Spinner size="sm" color="colorPalette.600" />
    <Spinner size="md" color="colorPalette.600" />
    <Spinner size="lg" color="colorPalette.600" />
  </Stack>
);

import { Spinner } from "chakra-ui-solid";

export default function SpinnerCustomColor() {
  return <Spinner color="teal.500" size="lg" />;
}

import { Spinner } from "chakra-ui-solid";

export default function SpinnerWithTrackColor() {
  return <Spinner color="red.500" css={{ "--spinner-track-color": "colors.gray.200" }} />;
}

import { Spinner } from "chakra-ui-solid";

export default function SpinnerWithCustomSpeed() {
  return <Spinner color="blue.500" animationDuration="0.8s" />;
}

import { Spinner } from "chakra-ui-solid";

export default function SpinnerWithCustomThickness() {
  return <Spinner color="blue.500" borderWidth="4px" />;
}

import { Spinner, Text, VStack } from "chakra-ui-solid";

/**
 * The label reads `colorPalette.fg` where the React version reads `colorPalette.600`.
 *
 * `teal.600` on the panel is 3.7:1 — a real WCAG AA failure for 16px text, which axe reports as a
 * violation and the examples suite refuses. `colorPalette.fg` is the token the preset ships for
 * text on a plain background (`teal.700` in light, `teal.300` in dark) and measures 7.2:1. The
 * spinner keeps `600`: it carries no text, so no contrast rule applies to it.
 */
export default function SpinnerWithLabel() {
  return (
    <VStack colorPalette="teal">
      <Spinner color="colorPalette.600" />
      <Text color="colorPalette.fg">Loading...</Text>
    </VStack>
  );
}

import { Box, Center, Heading, Spinner, Text } from "chakra-ui-solid";

export default function SpinnerWithOverlay() {
  return (
    <Box position="relative" aria-busy="true" userSelect="none">
      <Heading>Some heading text</Heading>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac consectetur libero, id
        ultricies urna. Sed ac consectetur libero, id fames ac ante ipsum primis in faucibus.
      </Text>
      <Box pos="absolute" inset="0" bg="bg/80">
        <Center h="full">
          <Spinner color="teal.500" />
        </Center>
      </Box>
    </Box>
  );
}