Stack

<script setup lang="ts">
import { Stack } from "@bysages/vue";
</script>

<template>
  <!-- Siblings held apart by one named step — the default `md`. -->
  <Stack class="w-full">
    <div class="border border-border bg-surface-3 px-3 py-2 text-sm">First</div>
    <div class="border border-border bg-surface-3 px-3 py-2 text-sm">Second</div>
    <div class="border border-border bg-surface-3 px-3 py-2 text-sm">Third</div>
  </Stack>
</template>

<script setup lang="ts">
import { Stack } from "@bysages/vue";

const steps = ["none", "xs", "sm", "md", "lg", "xl"] as const;
</script>

<template>
  <div class="grid w-full gap-4">
    <Stack v-for="step in steps" :key="step" :gap="step">
      <div class="border border-border bg-surface-3 px-3 py-2 text-sm">{{ step }}</div>
      <div class="border border-border bg-surface-3 px-3 py-2 text-sm">…</div>
    </Stack>
  </div>
</template>

<script setup lang="ts">
import { Stack } from "@bysages/vue";
</script>

<template>
  <Stack direction="row" class="w-full">
    <div class="border border-border bg-surface-3 px-3 py-2 text-sm">First</div>
    <div class="border border-border bg-surface-3 px-3 py-2 text-sm">Second</div>
    <div class="border border-border bg-surface-3 px-3 py-2 text-sm">Third</div>
  </Stack>
</template>

<script setup lang="ts">
import { Stack } from "@bysages/vue";
</script>

<template>
  <!-- A row that has run out of room lays its overflow down a line. -->
  <div class="w-96">
    <Stack direction="row" wrap>
      <div v-for="n in 8" :key="n" class="border border-border bg-surface-3 px-3 py-2 text-sm">
        Item {{ n }}
      </div>
    </Stack>
  </div>
</template>