button-group

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/button-group/ButtonGroup.astro directly.
3/**
4 * @component ButtonGroup
5 * @title Button Group
6 * @description A set of related buttons grouped together, with support for horizontal or vertical layouts.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2621-2972&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <ButtonGroup>
12 *   <Button variant="outline">Left</Button>
13 *   <Button variant="outline">Middle</Button>
14 *   <Button variant="outline">Right</Button>
15 * </ButtonGroup>
16 *
17 * @usage
18 *
19 * ```astro nocollapse
20 * ---
21 * import { ButtonGroup } from '@bejamas/ui/components/button-group';
22 * import { Button } from '@bejamas/ui/components/button';
23 * ---
24 * <ButtonGroup>
25 *   <Button>One</Button>
26 *   <Button>Two</Button>
27 *   <Button>Three</Button>
28 * </ButtonGroup>
29 * ```
30 *
31 * @props
32 * - orientation?: "horizontal" | "vertical" — Default: "horizontal".
33 * - class?: string — Additional classes for the container.
34 *
35 * @examples
36 *
37 * ### Orientation
38 *
39 * <ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
40 *   <Button variant="outline" size="icon">
41 *     <PlusIcon />
42 *   </Button>
43 *   <Button variant="outline" size="icon">
44 *     <MinusIcon />
45 *   </Button>
46 * </ButtonGroup>
47 *
48 * ### Size
49 *
50 * <div class="flex flex-col items-start gap-8">
51 *   <ButtonGroup>
52 *     <Button variant="outline" size="sm">
53 *       Small
54 *     </Button>
55 *     <Button variant="outline" size="sm">
56 *       Button
57 *     </Button>
58 *     <Button variant="outline" size="sm">
59 *       Group
60 *     </Button>
61 *     <Button variant="outline" size="icon-sm">
62 *       <PlusIcon />
63 *      </Button>
64 *   </ButtonGroup>
65 *   <ButtonGroup>
66 *     <Button variant="outline">Default</Button>
67 *     <Button variant="outline">Button</Button>
68 *     <Button variant="outline">Group</Button>
69 *     <Button variant="outline" size="icon">
70 *       <PlusIcon />
71 *     </Button>
72 *   </ButtonGroup>
73 *   <ButtonGroup>
74 *     <Button variant="outline" size="lg">
75 *       Large
76 *     </Button>
77 *     <Button variant="outline" size="lg">
78 *       Button
79 *     </Button>
80 *     <Button variant="outline" size="lg">
81 *       Group
82 *     </Button>
83 *     <Button variant="outline" size="icon-lg">
84 *       <PlusIcon />
85 *     </Button>
86 *   </ButtonGroup>
87 * </div>
88 */
89 
90import type { HTMLAttributes } from "astro/types";
91// … truncated