(feat): initial stuff

apps/showcase/src/App.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import {
+  Button,
+  OnboardingFlow,
+  ThemeCustomizer,
+  ThemeOnboardingPage,
+  type OnboardingStep,
+} from "@methanium/ui";
+
+export default function App() {
+  const [showOnboarding, setShowOnboarding] = useState(false);
+  const [onboardingThemeId, setOnboardingThemeId] = useState<string | null>(
+    null,
+  );
+  const steps: OnboardingStep[] = [
+    {
+      id: "welcome",
+      title: "Usually the legal stuff",
+      description: "but this is a showcase, so continue",
+      content: <></>,
+    },
+    {
+      id: "theme",
+      title: "Customisation",
+      description: "Let's just hope you don't get into decision paralysis",
+      content: (
+        <ThemeOnboardingPage
+          value={onboardingThemeId}
+          onValueChange={setOnboardingThemeId}
+        />
+      ),
+      defaultCanContinue: false,
+    },
+  ];
+
+  if (showOnboarding)
+    return (
+      <div className="h-dvh">
+        <OnboardingFlow
+          steps={steps}
+          onFinish={() => setShowOnboarding(false)}
+        />
+      </div>
+    );
+
+  return (
+    <main className="mx-auto flex max-w-[1500px] flex-col gap-7 p-5 md:p-10">
+      <div>
+        <Button variant="outline" onClick={() => setShowOnboarding(true)}>
+          Open onboarding
+        </Button>
+      </div>
+      <ThemeCustomizer />
+    </main>
+  );
+}

apps/showcase/src/index.css

@@ -0,0 +1,7 @@
+@import "@methanium/ui/index.css";
+@source ".";
+@source "../../../src";
+
+body {
+  margin: 0;
+}

apps/showcase/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider } from "@methanium/ui";
+
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </StrictMode>,
+);

apps/showcase/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />