feat(registry) new mode switcher component

app/docs/components/retro-mode-switcher/page.tsx

@@ -0,0 +1,66 @@
+import { Metadata } from "next";
+
+import { RetroModeSwitcher } from "@/components/ui/retro-mode-switcher";
+import { Separator } from "@/components/ui/separator";
+
+import CodeSnippet from "../code-snippet";
+import CopyCommandButton from "../copy-command-button";
+import InstallationCommands from "../installation-commands";
+
+export const metadata: Metadata = {
+  title: "8-bit Retro Mode Switcher",
+  description:
+    "A retro-styled theme toggle component with pixel art sun and moon icons. Perfect for 8-bit themed applications that need a nostalgic theme switcher.",
+};
+
+export default function RetroModeSwitcherPage() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col md:flex-row items-center justify-between gap-2">
+        <h1 className="text-3xl font-bold">Retro Mode Switcher</h1>
+        <CopyCommandButton
+          copyCommand="pnpm dlx shadcn@latest add @8bitcn/retro-mode-switcher"
+          command="pnpm dlx shadcn@latest add @8bitcn/retro-mode-switcher"
+        />
+      </div>
+
+      <p className="text-muted-foreground">
+        A retro-styled theme toggle component with pixel art sun and moon icons.
+        Perfect for 8-bit themed applications that need a nostalgic theme
+        switcher.
+      </p>
+
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            8-bit retro mode switcher component
+          </h2>
+        </div>
+        <div className="flex items-center justify-center min-h-[400px] relative">
+          <div className="flex flex-col items-center gap-6">
+            <div className="flex items-center gap-4">
+              <RetroModeSwitcher />
+              <span className="text-sm text-muted-foreground">
+                Click to toggle between light and dark themes
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h3 className="text-lg font-bold">Installation</h3>
+
+      <Separator />
+
+      <InstallationCommands packageName="retro-mode-switcher" />
+
+      <h3 className="text-lg font-bold mt-10">Usage</h3>
+
+      <Separator />
+
+      <CodeSnippet>{`import { RetroModeSwitcher } from "@/components/ui/retro-mode-switcher"`}</CodeSnippet>
+
+      <CodeSnippet>{`<RetroModeSwitcher />`}</CodeSnippet>
+    </div>
+  );
+}

components/mode-switcher.tsx

@@ -17,7 +17,7 @@ export function ModeSwitcher() {
   return (
     <Button
       variant="ghost"
-      className="group/toggle h-8 w-8 px-0"
+      className="group/toggle size-8 px-0"
       onClick={toggleTheme}
     >
       <SunIcon className="hidden [html.dark_&]:block" />

components/ui/retro-mode-switcher.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import * as React from "react";
+
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/8bit/button";
+
+export function RetroModeSwitcher() {
+  const { setTheme, resolvedTheme } = useTheme();
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  }, [resolvedTheme, setTheme]);
+
+  return (
+    <Button
+      variant="ghost"
+      className="group/toggle h-8 w-8 px-0"
+      onClick={toggleTheme}
+    >
+      <svg
+        width="50"
+        height="50"
+        viewBox="0 0 256 256"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        stroke="currentColor"
+        strokeWidth="0.25"
+        className="size-8 hidden [html.dark_&]:block"
+        aria-label="sun-dim"
+      >
+        <rect x="120" y="88" width="14" height="14" rx="1"></rect>
+        <rect x="104" y="88" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="104" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="136" width="14" height="14" rx="1"></rect>
+        <rect x="136" y="88" width="14" height="14" rx="1"></rect>
+        <rect x="120" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="104" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="136" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="152" y="104" width="14" height="14" rx="1"></rect>
+        <rect x="168" y="72" width="14" height="14" rx="1"></rect>
+        <rect x="168" y="168" width="14" height="14" rx="1"></rect>
+        <rect x="72" y="168" width="14" height="14" rx="1"></rect>
+        <rect x="72" y="72" width="14" height="14" rx="1"></rect>
+        <rect x="120" y="56" width="14" height="14" rx="1"></rect>
+        <rect x="56" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="120" y="184" width="14" height="14" rx="1"></rect>
+        <rect x="184" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="40" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="120" y="40" width="14" height="14" rx="1"></rect>
+        <rect x="120" y="200" width="14" height="14" rx="1"></rect>
+        <rect x="184" y="184" width="14" height="14" rx="1"></rect>
+        <rect x="56" y="184" width="14" height="14" rx="1"></rect>
+        <rect x="184" y="56" width="14" height="14" rx="1"></rect>
+        <rect x="56" y="56" width="14" height="14" rx="1"></rect>
+        <rect x="200" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="152" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="152" y="136" width="14" height="14" rx="1"></rect>
+      </svg>
+      <svg
+        width="50"
+        height="50"
+        viewBox="0 0 256 256"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        stroke="currentColor"
+        strokeWidth="0.25"
+        className="hidden [html.light_&]:block size-8"
+        aria-label="moon"
+      >
+        <rect x="104" y="56" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="56" width="14" height="14" rx="1"></rect>
+        <rect x="72" y="72" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="72" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="88" width="14" height="14" rx="1"></rect>
+        <rect x="72" y="88" width="14" height="14" rx="1"></rect>
+        <rect x="56" y="104" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="104" width="14" height="14" rx="1"></rect>
+        <rect x="72" y="104" width="14" height="14" rx="1"></rect>
+        <rect x="56" y="136" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="136" width="14" height="14" rx="1"></rect>
+        <rect x="72" y="136" width="14" height="14" rx="1"></rect>
+        <rect x="56" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="104" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="72" y="120" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="56" width="14" height="14" rx="1"></rect>
+        <rect x="104" y="136" width="14" height="14" rx="1"></rect>
+        <rect x="72" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="104" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="120" y="136" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="168" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="184" y="136" width="14" height="14" rx="1"></rect>
+        <rect x="120" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="152" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="136" y="152" width="14" height="14" rx="1"></rect>
+        <rect x="72" y="168" width="14" height="14" rx="1"></rect>
+        <rect x="104" y="168" width="14" height="14" rx="1"></rect>
+        <rect x="88" y="168" width="14" height="14" rx="1"></rect>
+        <rect x="168" y="168" width="14" height="14" rx="1"></rect>
+        <rect x="120" y="168" width="14" height="14" rx="1"></rect>
+        <rect x="152" y="168" width="14" height="14" rx="1"></rect>
+        <rect x="136" y="168" width="14" height="14" rx="1"></rect>
+        <rect x="104" y="184" width="14" height="14" rx="1"></rect>
+        <rect x="120" y="184" width="14" height="14" rx="1"></rect>
+        <rect x="136" y="184" width="14" height="14" rx="1"></rect>
+        <rect x="184" y="152" width="14" height="14" rx="1"></rect>
+      </svg>
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}

public/r/registry.json

@@ -1759,6 +1759,31 @@
           "target": "app/retro-globals.css"
         }
       ]
+    },
+    {
+      "name": "retro-mode-switcher",
+      "type": "registry:component",
+      "title": "8-bit Retro Mode Switcher",
+      "description": "A retro-styled theme toggle component with pixel art sun and moon icons. Perfect for 8-bit themed applications that need a nostalgic theme switcher.",
+      "registryDependencies": ["button"],
+      "dependencies": ["next-themes"],
+      "files": [
+        {
+          "path": "components/ui/retro-mode-switcher.tsx",
+          "type": "registry:component",
+          "target": "components/ui/retro-mode-switcher.tsx"
+        },
+        {
+          "path": "components/ui/8bit/button.tsx",
+          "type": "registry:component",
+          "target": "components/ui/8bit/button.tsx"
+        },
+        {
+          "path": "components/ui/8bit/styles/retro.css",
+          "type": "registry:component",
+          "target": "components/ui/8bit/styles/retro.css"
+        }
+      ]
     }
   ]
 }