The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| 5 | export function Spinner({ |
| 6 | className, |
| 7 | label = "Loading", |
| 8 | size = "md", |
| 9 | }: { |
| 10 | className?: string; |
| 11 | label?: string; |
| 12 | size?: "sm" | "md" | "lg"; |
| 13 | }) { |
| 14 | return ( |
| 15 | <svg |
| 16 | role="status" |
| 17 | aria-label={label} |
| 18 | viewBox="0 0 24 24" |
| 19 | className={cn( |
| 20 | "shrink-0 animate-spin", |
| 21 | size === "sm" ? "size-3.5" : size === "lg" ? "size-6" : "size-4", |
| 22 | className, |
| 23 | )} |
| 24 | > |
| 25 | <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeOpacity="0.18" strokeWidth="2.5" /> |
| 26 | <path d="M21 12a9 9 0 0 0-9-9" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" /> |
| 27 | </svg> |
| 28 | ); |
| 29 | } |
| 30 |
| 31 | /** A keyboard key, for shortcut hints. */ |
| 32 | export function Kbd({ className, ...props }: React.ComponentProps<"kbd">) { |
| 33 | return ( |
| 34 | <kbd |
| 35 | data-slot="kbd" |
| 36 | className={cn( |
| 37 | "inline-flex h-5 min-w-5 items-center justify-center rounded-md border border-border bg-muted/60 px-1 font-sans text-[11px] font-medium text-muted-foreground shadow-[inset_0_-1px_0_var(--border)]", |
| 38 | className, |
| 39 | )} |
| 40 | {...props} |
| 41 | /> |
| 42 | ); |
| 43 | } |
| 44 |