sh-ui-cli 0.62.0 → 0.63.0

package/data/changelog/versions.json

@@ -2,6 +2,18 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.63.0",
+      "date": "2026-05-08",
+      "title": "minor — `theme` 컴포넌트 제거, 사용자가 next-themes 직접 사용",
+      "type": "minor",
+      "highlights": [
+        "**`sh-ui add theme` 제거** — registry/react/components/theme 폴더와 registry.json 의 theme 항목 삭제. v0.62.0 의 어댑터는 결국 next-themes 의 얇은 wrapper 였고, 이중 layer 가 외부 deps 안내 누락 같은 잔버그를 부르던 구조. 사용자는 templates RootLayout 에 깔린 next-themes 의 ThemeProvider 위에서 `useTheme` 를 직접 import 해 쓴다.",
+        "**마이그레이션 (v0.62.0 사용자)** — `import { useTheme } from '@workspace/ui-web/components/theme'` → `import { useTheme } from 'next-themes'`. 시그니처 차이: sh-ui 의 `theme` 은 light/dark 만, next-themes 는 `resolvedTheme` 사용 (`'system'` 가능). 토글은 `setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')` 패턴.",
+        "**docs 자체도 next-themes 직접 사용으로 마이그레이션** — `apps/docs/components/dark-mode-toggle.tsx`, `apps/docs/app/[locale]/layout.tsx` 가 더 이상 sh-ui registry 의 theme 에 의존하지 않음. 컴포넌트 문서 페이지·examples(theme-dashboard, theme-login) 도 함께 정리."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.63.0"
+    },
     {
       "version": "0.62.0",
       "date": "2026-05-08",

package/data/registry/react/peer-versions.json

@@ -7,7 +7,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.11.0",
-    "next-themes": "^0.4.6",
     "react-hook-form": "^7.74.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0"

package/data/registry/react/registry.json

@@ -1768,20 +1768,6 @@
         "utils"
       ]
     },
-    "theme": {
-      "name": "theme",
-      "type": "component",
-      "files": [
-        {
-          "src": "components/theme/index.tsx",
-          "dest": "{components}/theme/index.tsx"
-        }
-      ],
-      "dependencies": [
-        "next-themes"
-      ],
-      "registryDependencies": []
-    },
     "checkbox": {
       "name": "checkbox",
       "type": "component",

package/data/summaries/react.json

@@ -37,7 +37,6 @@
     "spinner": "로딩 스피너 — size.",
     "separator": "구분선 — orientation(horizontal/vertical).",
     "skeleton": "스켈레톤 로딩 플레이스홀더.",
-    "theme": "테마 프로바이더 + useTheme 훅 — light/dark/system.",
     "code-panel": "Shiki 기반 코드 하이라이트 패널 — 복사 버튼 포함.",
     "code-tabs": "여러 코드 뷰(예: React/Flutter, 강조/전체)를 탭으로 전환 — Tabs + CodePanel 합성, 각 탭 내용은 CodePanelProps 그대로.",
     "page-toc": "페이지 자동 목차 — 헤딩 스캔 · slugify · IntersectionObserver active 추적 · smooth scroll. routeKey 로 라우트 변경 자동 재스캔, levels/excludeSelector 커스터마이즈.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/data/registry/react/components/theme/index.tsx

@@ -1,109 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ThemeProvider as NextThemesProvider,
-  useTheme as useNextTheme,
-} from "next-themes";
-
-type Theme = "light" | "dark";
-
-/* ───────────── Context ───────────── */
-
-type ThemeContextValue = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-  toggleTheme: () => void;
-};
-
-/**
- * 현재 테마와 setter 를 반환한다. ThemeProvider (또는 next-themes 의
- * ThemeProvider) 안에서만 호출 가능.
- *
- * 내부적으로 next-themes 의 useTheme 를 어댑팅 — `resolvedTheme` 을
- * `light`/`dark` 로 좁혀 노출하고, system 모드는 감추는 형태.
- */
-export function useTheme(): ThemeContextValue {
-  const { resolvedTheme, setTheme: setNextTheme } = useNextTheme();
-  const theme: Theme = resolvedTheme === "dark" ? "dark" : "light";
-
-  const setTheme = React.useCallback(
-    (next: Theme) => setNextTheme(next),
-    [setNextTheme],
-  );
-  const toggleTheme = React.useCallback(
-    () => setNextTheme(theme === "dark" ? "light" : "dark"),
-    [setNextTheme, theme],
-  );
-
-  return React.useMemo(
-    () => ({ theme, setTheme, toggleTheme }),
-    [theme, setTheme, toggleTheme],
-  );
-}
-
-/* ───────────── Provider ───────────── */
-
-export interface ThemeProviderProps {
-  /**
-   * 비제어 모드의 초기 테마. next-themes 가 storage(localStorage) 에 저장된
-   * 값을 우선하므로, 사용자가 한 번 선택한 후에는 이 값이 무시된다.
-   *
-   * @default "light"
-   */
-  defaultTheme?: Theme;
-  /**
-   * 제어 모드 — 지정 시 강제 테마로 고정 (next-themes `forcedTheme`).
-   * 보통 `defaultTheme` 비제어로 충분.
-   */
-  theme?: Theme;
-  /**
-   * 테마 변경 콜백. next-themes 자체는 setter 호출 시 콜백을 노출하지 않으므로
-   * 내부 effect 로 변화를 감지해 호출한다.
-   */
-  onThemeChange?: (theme: Theme) => void;
-  children: React.ReactNode;
-}
-
-/**
- * 다크/라이트 테마와 `<html class="dark">` 토글을 담당하는 Provider 어댑터.
- *
- * 내부 구현은 next-themes — `attribute='class'`, `enableSystem={false}`,
- * `disableTransitionOnChange` 로 고정. SSR/hydration mismatch 방지를 위해
- * `<html suppressHydrationWarning>` 을 RootLayout 에 함께 둘 것.
- */
-export function ThemeProvider({
-  defaultTheme = "light",
-  theme,
-  onThemeChange,
-  children,
-}: ThemeProviderProps) {
-  return (
-    <NextThemesProvider
-      attribute="class"
-      defaultTheme={defaultTheme}
-      enableSystem={false}
-      disableTransitionOnChange
-      forcedTheme={theme}
-      themes={["light", "dark"]}
-    >
-      {onThemeChange ? <ThemeChangeBridge onThemeChange={onThemeChange} /> : null}
-      {children}
-    </NextThemesProvider>
-  );
-}
-
-function ThemeChangeBridge({
-  onThemeChange,
-}: {
-  onThemeChange: (theme: Theme) => void;
-}) {
-  const { theme } = useTheme();
-  const last = React.useRef<Theme | null>(null);
-  React.useEffect(() => {
-    if (last.current === theme) return;
-    last.current = theme;
-    onThemeChange(theme);
-  }, [theme, onThemeChange]);
-  return null;
-}