docs: better release tags information (#365)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a component variant and release tag rendering based on the
stage parameter.
	- Added support for light and dark mode styling.
- Enhanced the Getting Started documentation with a new section
explaining component stages, including visual indicators.

- **Documentation**
- Updated the Getting Started guide with examples and explanations of
component stages using a new layout and visual components.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/documentation/.ladle/components.tsx

@@ -8,19 +8,31 @@ import { IconGitHub } from "@versini/ui-icons";
 import clsx from "clsx";
 
 const renderImportLine = (importName: string, stage?: string) => {
-	const releaseTag = stage ? stage : "alpha";
+	let variant: "information" | "warning" | "success", releaseTag;
+
+	switch (stage) {
+		case "beta":
+			variant = "information";
+			releaseTag = "beta";
+			break;
+		case "stable":
+			variant = "success";
+			releaseTag = "stable";
+			break;
+		default:
+			variant = "warning";
+			releaseTag = "alpha";
+			break;
+	}
+
 	return (
 		<div className="mb-6">
-			<Flexgrid
-				alignVertical="flex-end"
-				alignHorizontal="space-between"
-				className="mb-2"
-			>
+			<Flexgrid alignVertical="center" className="mb-2" columnGap={3}>
 				<FlexgridItem>
 					<h1 className="m-0">{importName}</h1>
 				</FlexgridItem>
 				<FlexgridItem>
-					<Pill label={releaseTag} theme="information" />
+					<Pill label={releaseTag} variant={variant} className="mt-2" />
 				</FlexgridItem>
 			</Flexgrid>
 

packages/documentation/.ladle/styles.css

@@ -7,3 +7,18 @@
 		@apply m-0 !important;
 	}
 }
+
+/* @media (prefers-color-scheme: light) {
+	html,
+	body,
+	.ladle-background {
+		background-color: white;
+	}
+}
+@media (prefers-color-scheme: dark) {
+	html,
+	body,
+	.ladle-background {
+		background-color: rgb(100 116 139);
+	}
+} */

packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable react/no-unescaped-entities */
+
 import { linkTo, Story } from "@ladle/react";
-import { ButtonIcon } from "@versini/ui-components";
+import { ButtonIcon, Pill } from "@versini/ui-components";
 import { IconPrevious } from "@versini/ui-icons";
 import { Flexgrid, FlexgridItem } from "@versini/ui-system";
 
@@ -17,8 +19,19 @@ export const ReleaseTags: Story<any> = () => (
 			help consuming partners, we are applying tags per components: alpha, then
 			beta and finally stable.
 		</p>
+		<p>
+			Component stage is indicated by a little "pill" located to the right of
+			the component title.
+		</p>
 
-		<h2>Alpha</h2>
+		<Flexgrid alignVertical="center" columnGap={3}>
+			<FlexgridItem>
+				<h2 className="m-0">Alpha</h2>
+			</FlexgridItem>
+			<FlexgridItem>
+				<Pill label="alpha" variant="warning" />
+			</FlexgridItem>
+		</Flexgrid>
 		<ul>
 			<li>
 				<strong>Alpha</strong> components are in the early stages of
@@ -33,7 +46,14 @@ export const ReleaseTags: Story<any> = () => (
 			</li>
 		</ul>
 
-		<h2>Beta</h2>
+		<Flexgrid alignVertical="center" columnGap={3}>
+			<FlexgridItem>
+				<h2 className="m-0">Beta</h2>
+			</FlexgridItem>
+			<FlexgridItem>
+				<Pill label="beta" variant="information" />
+			</FlexgridItem>
+		</Flexgrid>
 		<ul>
 			<li>
 				<strong>Beta</strong> components <em>can</em> be deployed to production.
@@ -50,7 +70,14 @@ export const ReleaseTags: Story<any> = () => (
 			</li>
 		</ul>
 
-		<h2>Stable</h2>
+		<Flexgrid alignVertical="center" columnGap={3}>
+			<FlexgridItem>
+				<h2 className="m-0">Stable</h2>
+			</FlexgridItem>
+			<FlexgridItem>
+				<Pill label="stable" variant="success" />
+			</FlexgridItem>
+		</Flexgrid>
 		<ul>
 			<li>
 				<strong>Stable</strong> components <strong>can</strong> be deployed to