spinner

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/spinner/Spinner.astro directly.
3/**
4 * @component Spinner
5 * @title Spinner
6 * @description A loading indicator component that displays an animated spinning icon.
7 *
8 * @preview
9 *
10 * <Item variant="muted" class="w-full max-w-xs">
11 *   <ItemMedia>
12 *     <Spinner />
13 *   </ItemMedia>
14 *   <ItemContent>
15 *     <ItemTitle class="line-clamp-1">Submitting Contact Form...</ItemTitle>
16 *   </ItemContent>
17 * </Item>
18 *
19 * @usage
20 *
21 * ```astro nocollapse
22 * ---
23 * import { Spinner } from '@bejamas/ui/components/spinner';
24 * ---
25 *
26 * <Spinner />
27 * ```
28 *
29 * ## Customization
30 *
31 * You can replace the default spinner icon with any other icon by editing the `Spinner` component.
32 *
33 * ```astro showLineNumbers title="components/ui/spinner/Spinner.astro" nocollapse nopreview
34 * ---
35 * import { cn } from "@/lib/utils";
36 * import { Loader as LoaderIcon } from "@lucide/astro";
37 *
38 * const { class: className = "", ...props } = Astro.props;
39 * ---
40 *
41 * <LoaderIcon
42 *   data-slot="spinner"
43 *   role="status"
44 *   aria-label="Loading"
45 *   class={cn("cn-spinner", "size-4 animate-spin", className)}
46 *   {...props}
47 * />
48 * ```
49 *
50 * @examples
51 *
52 * ### Size
53 *
54 * Use the `size-*` utility class to change the size of the spinner.
55 *
56 * <div class="flex items-center gap-6">
57 *   <Spinner class="size-3" />
58 *   <Spinner class="size-4" />
59 *   <Spinner class="size-6" />
60 *   <Spinner class="size-8" />
61 * </div>
62 *
63 * ### Button
64 *
65 * Add a spinner to a button to indicate a loading state. Remember to use the `data-icon` attribute for proper spacing.
66 *
67 * <div class="flex flex-col items-center gap-4">
68 *   <Button disabled size="sm">
69 *     <Spinner data-icon />
70 *     Loading...
71 *   </Button>
72 *   <Button variant="outline" disabled size="sm">
73 *     <Spinner data-icon />
74 *     Please wait
75 *   </Button>
76 *   <Button variant="secondary" disabled size="sm">
77 *     <Spinner data-icon />
78 *     Processing
79 *   </Button>
80 * </div>
81 *
82 * ### Badge
83 *
84 * Add a spinner to a badge to indicate a loading state.
85 *
86 * <div class="flex items-center gap-4 [--radius:1.2rem]">
87 *   <Badge>
88 *     <Spinner data-icon />
89 *     Syncing
90 *   </Badge>
91 *   <Badge variant="secondary">
92 *     <Spinner data-icon />
93 *     Updating
94 *   </Badge>
95 *   <Badge variant="outline">
96 *     <Spinner data-icon />
97 *     Processing
98 *   </Badge>
99 * </div>
100 *
101 * ### Input Group
102 *
103// … truncated