feat(docs): colocate localized package sandboxes

packages/appearance/docs/sandboxes/theme-toggle/AccentPicker.tsx

@@ -0,0 +1,30 @@
+import {
+  ThemeColorPicker,
+  accentColorSwatches,
+  type ThemeColorPickerVariant,
+} from "@workspace/appearance/components/theme-color-picker"
+import type { ThemeColorConfig } from "@workspace/appearance/theme"
+
+export function AccentPicker({
+  config,
+  onConfigChange,
+  title,
+  variant,
+}: {
+  config: ThemeColorConfig
+  onConfigChange: (config: ThemeColorConfig) => void
+  title: string
+  variant?: ThemeColorPickerVariant
+}) {
+  return (
+    <ThemeColorPicker
+      title={title}
+      swatches={accentColorSwatches}
+      value={config.accentColor}
+      variant={variant}
+      onValueChange={(accentColor) =>
+        onConfigChange({ ...config, accentColor })
+      }
+    />
+  )
+}

packages/appearance/docs/sandboxes/theme-toggle/App.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { I18nProvider } from "@workspace/i18n"
+import { messages as englishMessages } from "@workspace/appearance/locales/en-US"
+import { messages as chineseMessages } from "@workspace/appearance/locales/zh-Hans"
+import type { ThemeColorConfig } from "@workspace/appearance/theme"
+
+import { AccentPicker } from "./AccentPicker"
+
+const catalogs = {
+  "en-US": englishMessages,
+  "zh-Hans": chineseMessages,
+} as const
+
+export default function ThemeColorsExample({
+  locale,
+}: {
+  locale: "en-US" | "zh-Hans"
+}) {
+  const [config, setConfig] = React.useState<ThemeColorConfig>({
+    accentColor: "indigo",
+    baseColor: "neutral",
+  })
+
+  const title = locale === "zh-Hans" ? "强调色" : "Accent color"
+
+  return (
+    <I18nProvider catalogs={catalogs} locale={locale}>
+      <div className="mx-auto flex max-w-xl flex-col gap-6">
+        <AccentPicker
+          config={config}
+          title={title}
+          onConfigChange={setConfig}
+        />
+        <AccentPicker
+          config={config}
+          title={title}
+          variant="swatch"
+          onConfigChange={setConfig}
+        />
+      </div>
+    </I18nProvider>
+  )
+}

packages/appearance/docs/sandboxes/theme-toggle/sandbox.ts

@@ -0,0 +1,13 @@
+export default {
+  id: "appearance/theme-colors",
+  title: {
+    "en-US": "Controlled theme colors",
+    "zh-Hans": "受控主题颜色",
+  },
+  entry: () => import("./App"),
+  files: {
+    "App.tsx": () => import("./App.tsx?raw"),
+    "AccentPicker.tsx": () => import("./AccentPicker.tsx?raw"),
+  },
+  defaultFile: "App.tsx",
+} satisfies import("../../../../../docs/src/components/sandbox/types").SandboxDefinition

packages/appearance/docs/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../docs/tsconfig.sandbox.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "../../../docs/node_modules/.tmp/appearance-docs.tsbuildinfo"
+  },
+  "include": ["sandboxes/**/*.ts", "sandboxes/**/*.tsx"]
+}