(feat): more improvements

(feat): bump version

apps/showcase/src/App.tsx

@@ -1,14 +1,32 @@
 import { useState } from "react";
+import { Blocks, Home, Palette, Settings } from "lucide-react";
 import {
   Button,
+  LoadingScreen,
   OnboardingFlow,
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarProvider,
   ThemeCustomizer,
   ThemeOnboardingPage,
   type OnboardingStep,
 } from "@methanium/ui";
 
+const navigation = [
+  { label: "Banana", icon: Home, variant: "default" },
+  { label: "Orange", icon: Blocks, variant: "subtleDefault" },
+  { label: "Apple", icon: Palette, variant: "outline" },
+  { label: "Kiwi", icon: Settings, variant: "secondary" },
+] as const;
+
 export default function App() {
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const [showLoading, setShowLoading] = useState(false);
   const [onboardingThemeId, setOnboardingThemeId] = useState<string | null>(
     null,
   );
@@ -43,14 +61,61 @@ export default function App() {
       </div>
     );
 
-  return (
+  if (showLoading)
-    <main className="mx-auto flex max-w-[1500px] flex-col gap-7 p-5 md:p-10">
+    return (
-      <div>
+      <div className="relative">
-        <Button variant="subtleDefault" onClick={() => setShowOnboarding(true)}>
+        <LoadingScreen
-          Open onboarding
+          noProgress
+          title="Loading screen"
+          description="Blalblblalbalbl"
+        />
+        <Button
+          className="fixed top-4 left-4 z-50"
+          variant="outline"
+          onClick={() => setShowLoading(false)}
+        >
+          Hide loading screen
         </Button>
       </div>
-      <ThemeCustomizer />
+    );
-    </main>
+
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="none" className="h-auto! min-h-svh self-stretch">
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu className="gap-5">
+                {navigation.map(({ label, icon: Icon, variant }) => (
+                  <SidebarMenuItem key={label}>
+                    <Button variant={variant} className="w-full justify-start">
+                      <Icon />
+                      <span>{label}</span>
+                    </Button>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+
+      <SidebarInset>
+        <div className="mx-auto flex w-full max-w-[1500px] flex-col gap-7 p-5 md:p-10">
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant="subtleDefault"
+              onClick={() => setShowOnboarding(true)}
+            >
+              Open onboarding
+            </Button>
+            <Button variant="outline" onClick={() => setShowLoading(true)}>
+              Toggle loading screen
+            </Button>
+          </div>
+          <ThemeCustomizer />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@methanium/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

src/cmp/alert-dialog.tsx

@@ -30,7 +30,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/50 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className,
       )}
       {...props}

src/cmp/dialog.tsx

@@ -29,7 +29,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/50 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className,
       )}
       {...props}

src/cmp/drawer.tsx

@@ -37,7 +37,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className,
       )}
       {...props}

src/cmp/sheet.tsx

@@ -28,7 +28,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
         className,
       )}
       {...props}

src/theme/presets.ts

@@ -48,6 +48,7 @@ export const BUILT_IN_THEMES = defineThemes([
   --primary-foreground: oklch(0.985 0.012 184);
   --primary-foreground-alt: oklch(0.58 0.13 185);
   --ring: oklch(0.62 0.12 185);
+  --sidebar: color-mix(in oklch, var(--background) 97%, white);
   --sidebar-primary: oklch(0.58 0.12 185);
 }
 :root.dark[data-theme="tensamin"] {
@@ -384,13 +385,16 @@ export const BUILT_IN_THEMES = defineThemes([
     css: `:root[data-theme="secret"] {
   --secret-border: color-mix(in srgb, #ffe8b4 15%, #24120c 85%);
   --secret-control: #5e244e;
+  --secret-gold: color-mix(in srgb, #f9b637 75%, #2f1b13 25%);
+  --secret-gold-dark: color-mix(in srgb, var(--secret-gold) 60%, #2f1b13 40%);
+  --secret-gold-light: color-mix(in srgb, var(--secret-gold) 45%, #ffe8b4 55%);
   --background: #2f1b13;
   --foreground: #fffaf2;
-  --card: #f9b637;
+  --card: var(--background);
-  --card-foreground: #24120c;
+  --card-foreground: var(--foreground);
   --popover: #5e244e;
   --popover-foreground: #fffaf2;
-  --primary: #f9b637;
+  --primary: var(--secret-gold);
   --primary-foreground: #24120c;
   --primary-foreground-alt: #fb6c00;
   --secondary: #5e244e;
@@ -405,7 +409,7 @@ export const BUILT_IN_THEMES = defineThemes([
   --ring: #fb6c00;
   --sidebar: #24120c;
   --sidebar-foreground: #fffaf2;
-  --sidebar-primary: #f9b637;
+  --sidebar-primary: var(--secret-gold);
   --sidebar-primary-foreground: #24120c;
   --sidebar-accent: #aa1c41;
   --sidebar-accent-foreground: #fffaf2;
@@ -414,11 +418,11 @@ export const BUILT_IN_THEMES = defineThemes([
 :root.dark[data-theme="secret"] {
   --background: #24120c;
   --foreground: #ffe8b4;
-  --card: #f9b637;
+  --card: var(--background);
-  --card-foreground: #24120c;
+  --card-foreground: var(--foreground);
   --popover: #2f1b13;
   --popover-foreground: #ffe8b4;
-  --primary: #f9b637;
+  --primary: var(--secret-gold);
   --primary-foreground: #24120c;
   --primary-foreground-alt: #fb6c00;
   --secondary: #5e244e;
@@ -433,7 +437,7 @@ export const BUILT_IN_THEMES = defineThemes([
   --ring: #fb6c00;
   --sidebar: #24120c;
   --sidebar-foreground: #ffe8b4;
-  --sidebar-primary: #f9b637;
+  --sidebar-primary: var(--secret-gold);
   --sidebar-primary-foreground: #24120c;
   --sidebar-accent: #aa1c41;
   --sidebar-accent-foreground: #fffaf2;
@@ -485,7 +489,7 @@ export const BUILT_IN_THEMES = defineThemes([
 }
 :root[data-theme="secret"] [data-slot="button"][data-variant="default"] {
   background-color: var(--primary);
-  background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%)), linear-gradient(115deg, #e73f1e 0%, #fb6c00 30%, #ffdd9c 47%, #f9b637 58%, #fb6c00 100%);
+  background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%)), linear-gradient(115deg, var(--secret-gold-dark) 0%, var(--secret-gold) 30%, var(--secret-gold-light) 47%, var(--secret-gold) 62%, var(--secret-gold-dark) 100%);
   border-color: var(--secret-border);
   color: var(--primary-foreground);
   text-shadow: 0 1px rgb(255 255 255 / 35%);
@@ -496,10 +500,7 @@ export const BUILT_IN_THEMES = defineThemes([
   box-shadow: inset 0 1px color-mix(in oklch, white 8%, transparent), 0 1rem 3rem rgb(97 37 82 / 12%);
 }
 :root[data-theme="secret"] [data-slot="card"] {
-  background: linear-gradient(115deg, #e68457 0%, #f9b637 30%, #fffaf2 47%, #ffdd9c 58%, #fb6c00 100%);
+  background: var(--card);
-}
-:root.dark[data-theme="secret"] [data-slot="card"] {
-  background: linear-gradient(115deg, #5e244e 0%, #aa1c41 18%, #e68457 32%, #f9b637 44%, #fffaf2 50%, #ffdd9c 58%, #fb6c00 72%, #5e244e 100%);
 }
 :root[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"] {
   background-color: #5e244e;