@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/ui/components/theme/theme-provider.d.cts

@@ -1,40 +1,52 @@
 import { Theme, ColorTheme, SpacingTheme, CustomThemeColors } from './theme-context.cjs';
+/**
+ * Initial theme settings and browser storage keys; see ThemeProvider for usage.
+ * @see ThemeProvider for the canonical usage example.
+ */
 export type ThemeProviderProps = {
+    /** Descendants that consume theme state. */
     children: React.ReactNode;
+    /** Initial mode when storage is empty; defaults to 'system'. */
     defaultTheme?: Theme;
+    /** Initial palette when storage is empty; defaults to 'default'. */
     defaultColorTheme?: ColorTheme;
+    /** Initial density when storage is empty; defaults to 'normal'. */
     defaultSpacingTheme?: SpacingTheme;
+    /** Initial custom CSS variable values; subsequent prop changes do not replace state. */
     customColors?: CustomThemeColors;
+    /** Mode localStorage key; defaults to 'vite-ui-theme'. */
     storageKey?: string;
+    /** Palette localStorage key; defaults to 'vite-ui-color-theme'. */
     colorThemeStorageKey?: string;
+    /** Density localStorage key; defaults to 'vite-ui-spacing-theme'. */
     spacingThemeStorageKey?: string;
 };
 /**
- * テーマプロバイダーコンポーネント
- *
- * ダークモード、カラーテーマ、スペーシングテーマを管理。
- * アプリケーションのルートで使用。
+ * Provides browser theme state and applies mode, palette and density to documentElement.
  *
- * @example
- * ```tsx
- * import { ThemeProvider } from "../../index.cjs";
+ * @param props - Children, initial settings, custom CSS variables and storage keys.
  *
- * <ThemeProvider defaultTheme="system" defaultColorTheme="blue">
- *   <App />
- * </ThemeProvider>
- * ```
- */
-export declare function ThemeProvider({ children, defaultTheme, defaultColorTheme, defaultSpacingTheme, customColors: initialCustomColors, storageKey, colorThemeStorageKey, spacingThemeStorageKey, ...props }: ThemeProviderProps): import('react').JSX.Element;
-/**
- * テーマコンテキストを取得するフック
+ * @returns Theme context for descendants.
  *
- * テーマモード、カラーテーマ、スペーシングテーマの
- * 取得と変更が可能。
+ * @throws Browser localStorage access failures during initialization or setter calls propagate.
  *
- * @returns テーマ状態と設定関数
+ * @remarks Import @alneas/appkit-react/styles in the host for Appkit theme styling.
+ * No query/auth provider is required. Stored values override defaults on the client;
+ * server rendering uses defaults, so stored preferences can differ at hydration.
+ * Effects update root classes and custom CSS variables after mount. System mode listens
+ * for media-query changes and removes that listener on cleanup. Custom CSS variables
+ * are removed on cleanup; root theme classes remain. Mode/palette/density setters persist
+ * to localStorage; custom colors are in-memory state. Coordinate multiple providers
+ * because they write the same document root. Stored values are cast without validation.
  *
  * @example
  * ```tsx
- * const { theme, setTheme, colorTheme, setColorTheme } = useTheme();
+ * import type { ReactNode } from 'react';
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider } from '@alneas/appkit-react/ui/theme';
+ * export function ThemeRoot({ children }: { children: ReactNode }) {
+ *   return <ThemeProvider defaultTheme="system" defaultColorTheme="blue">{children}</ThemeProvider>;
+ * }
  * ```
  */
+export declare function ThemeProvider({ children, defaultTheme, defaultColorTheme, defaultSpacingTheme, customColors: initialCustomColors, storageKey, colorThemeStorageKey, spacingThemeStorageKey, ...props }: ThemeProviderProps): import('react').JSX.Element;

package/dist/ui/components/theme/theme-provider.d.ts

@@ -1,40 +1,52 @@
 import { Theme, ColorTheme, SpacingTheme, CustomThemeColors } from './theme-context.js';
+/**
+ * Initial theme settings and browser storage keys; see ThemeProvider for usage.
+ * @see ThemeProvider for the canonical usage example.
+ */
 export type ThemeProviderProps = {
+    /** Descendants that consume theme state. */
     children: React.ReactNode;
+    /** Initial mode when storage is empty; defaults to 'system'. */
     defaultTheme?: Theme;
+    /** Initial palette when storage is empty; defaults to 'default'. */
     defaultColorTheme?: ColorTheme;
+    /** Initial density when storage is empty; defaults to 'normal'. */
     defaultSpacingTheme?: SpacingTheme;
+    /** Initial custom CSS variable values; subsequent prop changes do not replace state. */
     customColors?: CustomThemeColors;
+    /** Mode localStorage key; defaults to 'vite-ui-theme'. */
     storageKey?: string;
+    /** Palette localStorage key; defaults to 'vite-ui-color-theme'. */
     colorThemeStorageKey?: string;
+    /** Density localStorage key; defaults to 'vite-ui-spacing-theme'. */
     spacingThemeStorageKey?: string;
 };
 /**
- * テーマプロバイダーコンポーネント
- *
- * ダークモード、カラーテーマ、スペーシングテーマを管理。
- * アプリケーションのルートで使用。
+ * Provides browser theme state and applies mode, palette and density to documentElement.
  *
- * @example
- * ```tsx
- * import { ThemeProvider } from "../../index.js";
+ * @param props - Children, initial settings, custom CSS variables and storage keys.
  *
- * <ThemeProvider defaultTheme="system" defaultColorTheme="blue">
- *   <App />
- * </ThemeProvider>
- * ```
- */
-export declare function ThemeProvider({ children, defaultTheme, defaultColorTheme, defaultSpacingTheme, customColors: initialCustomColors, storageKey, colorThemeStorageKey, spacingThemeStorageKey, ...props }: ThemeProviderProps): import('react').JSX.Element;
-/**
- * テーマコンテキストを取得するフック
+ * @returns Theme context for descendants.
  *
- * テーマモード、カラーテーマ、スペーシングテーマの
- * 取得と変更が可能。
+ * @throws Browser localStorage access failures during initialization or setter calls propagate.
  *
- * @returns テーマ状態と設定関数
+ * @remarks Import @alneas/appkit-react/styles in the host for Appkit theme styling.
+ * No query/auth provider is required. Stored values override defaults on the client;
+ * server rendering uses defaults, so stored preferences can differ at hydration.
+ * Effects update root classes and custom CSS variables after mount. System mode listens
+ * for media-query changes and removes that listener on cleanup. Custom CSS variables
+ * are removed on cleanup; root theme classes remain. Mode/palette/density setters persist
+ * to localStorage; custom colors are in-memory state. Coordinate multiple providers
+ * because they write the same document root. Stored values are cast without validation.
  *
  * @example
  * ```tsx
- * const { theme, setTheme, colorTheme, setColorTheme } = useTheme();
+ * import type { ReactNode } from 'react';
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider } from '@alneas/appkit-react/ui/theme';
+ * export function ThemeRoot({ children }: { children: ReactNode }) {
+ *   return <ThemeProvider defaultTheme="system" defaultColorTheme="blue">{children}</ThemeProvider>;
+ * }
  * ```
  */
+export declare function ThemeProvider({ children, defaultTheme, defaultColorTheme, defaultSpacingTheme, customColors: initialCustomColors, storageKey, colorThemeStorageKey, spacingThemeStorageKey, ...props }: ThemeProviderProps): import('react').JSX.Element;

package/dist/ui/components/theme/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","names":["ThemeProvider","initialCustomColors","props","theme","setTheme","useState","defaultTheme","storageKey","colorTheme","setColorTheme","defaultColorTheme","colorThemeStorageKey","spacingTheme","setSpacingTheme","defaultSpacingTheme","spacingThemeStorageKey","resolvedTheme","setResolvedTheme","customColors","setCustomColors","useEffect","root","applyTheme","systemTheme","mediaQuery","handleChange","key","value","ThemeProviderContext"],"sources":["../../../../src/ui/components/theme/theme-provider.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  type Theme,\n  type ColorTheme,\n  type SpacingTheme,\n  type CustomThemeColors,\n  ThemeProviderContext,\n} from './theme-context';\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  defaultTheme?: Theme;\n  defaultColorTheme?: ColorTheme;\n  defaultSpacingTheme?: SpacingTheme;\n  customColors?: CustomThemeColors;\n  storageKey?: string;\n  colorThemeStorageKey?: string;\n  spacingThemeStorageKey?: string;\n};\n\n/**\n * テーマプロバイダーコンポーネント\n *\n * ダークモード、カラーテーマ、スペーシングテーマを管理。\n * アプリケーションのルートで使用。\n *\n * @example\n * ```tsx\n * import { ThemeProvider } from \"../..\";\n *\n * <ThemeProvider defaultTheme=\"system\" defaultColorTheme=\"blue\">\n *   <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'system',\n  defaultColorTheme = 'default',\n  defaultSpacingTheme = 'normal',\n  customColors: initialCustomColors,\n  storageKey = 'vite-ui-theme',\n  colorThemeStorageKey = 'vite-ui-color-theme',\n  spacingThemeStorageKey = 'vite-ui-spacing-theme',\n  ...props\n}: ThemeProviderProps) {\n  // Initialize with defaults to avoid SSR ReferenceError and Hydration Mismatch\n  const [theme, setTheme] = useState<Theme>(() => {\n    if (typeof window === 'undefined') return defaultTheme;\n    return (localStorage.getItem(storageKey) as Theme) || defaultTheme;\n  });\n  const [colorTheme, setColorTheme] = useState<ColorTheme>(() => {\n    if (typeof window === 'undefined') return defaultColorTheme;\n    return (localStorage.getItem(colorThemeStorageKey) as ColorTheme) || defaultColorTheme;\n  });\n  const [spacingTheme, setSpacingTheme] = useState<SpacingTheme>(() => {\n    if (typeof window === 'undefined') return defaultSpacingTheme;\n    return (localStorage.getItem(spacingThemeStorageKey) as SpacingTheme) || defaultSpacingTheme;\n  });\n\n  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');\n\n  const [customColors, setCustomColors] = useState<CustomThemeColors | undefined>(\n    initialCustomColors,\n  );\n\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    const applyTheme = (t: Theme) => {\n      root.classList.remove('light', 'dark');\n\n      if (t === 'system') {\n        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches\n          ? 'dark'\n          : 'light';\n\n        root.classList.add(systemTheme);\n        setResolvedTheme(systemTheme);\n        return;\n      }\n\n      root.classList.add(t);\n      setResolvedTheme(t as 'light' | 'dark');\n    };\n\n    applyTheme(theme);\n\n    // Listen for system changes if set to system\n    if (theme === 'system') {\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n      const handleChange = () => applyTheme('system');\n\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    }\n  }, [theme]);\n\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    // 既存のカラーテーマクラスを削除\n    root.classList.remove('theme-blue', 'theme-green', 'theme-rose', 'theme-orange', 'theme-future');\n\n    // デフォルト以外の場合はクラスを追加\n    if (colorTheme !== 'default') {\n      root.classList.add(`theme-${colorTheme}`);\n    }\n  }, [colorTheme]);\n\n  // スペーシングテーマを適用\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    // 既存のスペーシングクラスを削除\n    root.classList.remove('spacing-compact', 'spacing-normal', 'spacing-comfortable');\n\n    // スペーシングテーマクラスを追加\n    root.classList.add(`spacing-${spacingTheme}`);\n  }, [spacingTheme]);\n\n  // カスタムカラーをCSS変数として適用\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    if (customColors) {\n      // CSS変数を設定\n      Object.entries(customColors).forEach(([key, value]) => {\n        if (value) {\n          root.style.setProperty(`--${key}`, value);\n        }\n      });\n    }\n\n    // クリーンアップ: カスタムカラーが削除された場合は元に戻す\n    return () => {\n      if (customColors) {\n        Object.keys(customColors).forEach((key) => {\n          root.style.removeProperty(`--${key}`);\n        });\n      }\n    };\n  }, [customColors]);\n\n  const value = {\n    theme,\n    resolvedTheme,\n    setTheme: (theme: Theme) => {\n      localStorage.setItem(storageKey, theme);\n      setTheme(theme);\n    },\n    colorTheme,\n    setColorTheme: (colorTheme: ColorTheme) => {\n      localStorage.setItem(colorThemeStorageKey, colorTheme);\n      setColorTheme(colorTheme);\n    },\n    spacingTheme,\n    setSpacingTheme: (spacingTheme: SpacingTheme) => {\n      localStorage.setItem(spacingThemeStorageKey, spacingTheme);\n      setSpacingTheme(spacingTheme);\n    },\n    customColors,\n    setCustomColors,\n  };\n\n  return (\n    <ThemeProviderContext.Provider {...props} value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n\n/**\n * テーマコンテキストを取得するフック\n *\n * テーマモード、カラーテーマ、スペーシングテーマの\n * 取得と変更が可能。\n *\n * @returns テーマ状態と設定関数\n *\n * @example\n * ```tsx\n * const { theme, setTheme, colorTheme, setColorTheme } = useTheme();\n * ```\n */\n"],"mappings":";;;;;AAmCA,SAAgBA,EAAc,EAC5B,aACA,kBAAe,UACf,uBAAoB,WACpB,yBAAsB,UACtB,cAAcC,GACd,gBAAa,iBACb,0BAAuB,uBACvB,4BAAyB,yBACzB,GAAGC,KACkB;CAErB,IAAM,CAACC,GAAOC,KAAYC,QACpB,OAAO,SAAW,MAAoBC,IAClC,aAAa,QAAQC,CAAU,KAAeD,CACvD,GACK,CAACE,GAAYC,KAAiBJ,QAC9B,OAAO,SAAW,MAAoBK,IAClC,aAAa,QAAQC,CAAoB,KAAoBD,CACtE,GACK,CAACE,GAAcC,KAAmBR,QAClC,OAAO,SAAW,MAAoBS,IAClC,aAAa,QAAQC,CAAsB,KAAsBD,CAC1E,GAEK,CAACE,GAAeC,KAAoBZ,EAA2B,OAAO,GAEtE,CAACa,GAAcC,KAAmBd,EACtCJ,CACF;CA0DA,AAxDAmB,QAAgB;EACd,IAAMC,IAAO,OAAO,SAAS,iBAEvBC,KAAc,MAAa;GAG/B,IAFAD,EAAK,UAAU,OAAO,SAAS,MAAM,GAEjC,MAAM,UAAU;IAClB,IAAME,IAAc,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAClE,SACA;IAGJ,AADAF,EAAK,UAAU,IAAIE,CAAW,GAC9BN,EAAiBM,CAAW;GAE9B,OAGA,AADAF,EAAK,UAAU,IAAI,CAAC,GACpBJ,EAAiB,CAAqB;EACxC;EAKA,IAHAK,EAAWnB,CAAK,GAGZA,MAAU,UAAU;GACtB,IAAMqB,IAAa,OAAO,WAAW,8BAA8B,GAC7DC,UAAqBH,EAAW,QAAQ;GAG9C,OADAE,EAAW,iBAAiB,UAAUC,CAAY,SACrCD,EAAW,oBAAoB,UAAUC,CAAY;EACpE;CACF,GAAG,CAACtB,CAAK,CAAC,GAEViB,QAAgB;EACd,IAAMC,IAAO,OAAO,SAAS;EAM7B,AAHAA,EAAK,UAAU,OAAO,cAAc,eAAe,cAAc,gBAAgB,cAAc,GAG3Fb,MAAe,aACjBa,EAAK,UAAU,IAAI,SAASb,GAAY;CAE5C,GAAG,CAACA,CAAU,CAAC,GAGfY,QAAgB;EACd,IAAMC,IAAO,OAAO,SAAS;EAM7B,AAHAA,EAAK,UAAU,OAAO,mBAAmB,kBAAkB,qBAAqB,GAGhFA,EAAK,UAAU,IAAI,WAAWT,GAAc;CAC9C,GAAG,CAACA,CAAY,CAAC,GAGjBQ,QAAgB;EACd,IAAMC,IAAO,OAAO,SAAS;EAY7B,OAVIH,KAEF,OAAO,QAAQA,CAAY,CAAC,CAAC,SAAS,CAACQ,GAAKC,OAAW;GACrD,AAAIA,KACFN,EAAK,MAAM,YAAY,KAAKK,KAAOC,CAAK;EAE5C,CAAC,SAIU;GACX,AAAIT,KACF,OAAO,KAAKA,CAAY,CAAC,CAAC,SAAS,MAAQ;IACzC,EAAK,MAAM,eAAe,KAAKQ,GAAK;GACtC,CAAC;EAEL;CACF,GAAG,CAACR,CAAY,CAAC;CAEjB,IAAMS,IAAQ;EACZ;EACA;EACA,WAAW,MAAiB;GAE1B,AADA,aAAa,QAAQpB,GAAYJ,CAAK,GACtCC,EAASD,CAAK;EAChB;EACA;EACA,gBAAgB,MAA2B;GAEzC,AADA,aAAa,QAAQQ,GAAsBH,CAAU,GACrDC,EAAcD,CAAU;EAC1B;EACA;EACA,kBAAkB,MAA+B;GAE/C,AADA,aAAa,QAAQO,GAAwBH,CAAY,GACzDC,EAAgBD,CAAY;EAC9B;EACA;EACA;CACF;CAEA,OACE,kBAACgB,EAAqB,UAAtB;EAA+B,GAAI1B;EAAc;EAC9C;CAC4B,CAAA;AAEnC"}
+{"version":3,"file":"theme-provider.js","names":["ThemeProvider","initialCustomColors","props","theme","setTheme","useState","defaultTheme","storageKey","colorTheme","setColorTheme","defaultColorTheme","colorThemeStorageKey","spacingTheme","setSpacingTheme","defaultSpacingTheme","spacingThemeStorageKey","resolvedTheme","setResolvedTheme","customColors","setCustomColors","useEffect","root","applyTheme","systemTheme","mediaQuery","handleChange","key","value","ThemeProviderContext"],"sources":["../../../../src/ui/components/theme/theme-provider.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  type Theme,\n  type ColorTheme,\n  type SpacingTheme,\n  type CustomThemeColors,\n  ThemeProviderContext,\n} from './theme-context';\n\n/**\n * Initial theme settings and browser storage keys; see ThemeProvider for usage.\n * @see ThemeProvider for the canonical usage example.\n */\nexport type ThemeProviderProps = {\n  /** Descendants that consume theme state. */\n  children: React.ReactNode;\n  /** Initial mode when storage is empty; defaults to 'system'. */\n  defaultTheme?: Theme;\n  /** Initial palette when storage is empty; defaults to 'default'. */\n  defaultColorTheme?: ColorTheme;\n  /** Initial density when storage is empty; defaults to 'normal'. */\n  defaultSpacingTheme?: SpacingTheme;\n  /** Initial custom CSS variable values; subsequent prop changes do not replace state. */\n  customColors?: CustomThemeColors;\n  /** Mode localStorage key; defaults to 'vite-ui-theme'. */\n  storageKey?: string;\n  /** Palette localStorage key; defaults to 'vite-ui-color-theme'. */\n  colorThemeStorageKey?: string;\n  /** Density localStorage key; defaults to 'vite-ui-spacing-theme'. */\n  spacingThemeStorageKey?: string;\n};\n\n/**\n * Provides browser theme state and applies mode, palette and density to documentElement.\n *\n * @param props - Children, initial settings, custom CSS variables and storage keys.\n *\n * @returns Theme context for descendants.\n *\n * @throws Browser localStorage access failures during initialization or setter calls propagate.\n *\n * @remarks Import @alneas/appkit-react/styles in the host for Appkit theme styling.\n * No query/auth provider is required. Stored values override defaults on the client;\n * server rendering uses defaults, so stored preferences can differ at hydration.\n * Effects update root classes and custom CSS variables after mount. System mode listens\n * for media-query changes and removes that listener on cleanup. Custom CSS variables\n * are removed on cleanup; root theme classes remain. Mode/palette/density setters persist\n * to localStorage; custom colors are in-memory state. Coordinate multiple providers\n * because they write the same document root. Stored values are cast without validation.\n *\n * @example\n * ```tsx\n * import type { ReactNode } from 'react';\n * import '@alneas/appkit-react/styles';\n * import { ThemeProvider } from '@alneas/appkit-react/ui/theme';\n * export function ThemeRoot({ children }: { children: ReactNode }) {\n *   return <ThemeProvider defaultTheme=\"system\" defaultColorTheme=\"blue\">{children}</ThemeProvider>;\n * }\n * ```\n */\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'system',\n  defaultColorTheme = 'default',\n  defaultSpacingTheme = 'normal',\n  customColors: initialCustomColors,\n  storageKey = 'vite-ui-theme',\n  colorThemeStorageKey = 'vite-ui-color-theme',\n  spacingThemeStorageKey = 'vite-ui-spacing-theme',\n  ...props\n}: ThemeProviderProps) {\n  // Initialize with defaults to avoid SSR ReferenceError and Hydration Mismatch\n  const [theme, setTheme] = useState<Theme>(() => {\n    if (typeof window === 'undefined') return defaultTheme;\n    return (localStorage.getItem(storageKey) as Theme) || defaultTheme;\n  });\n  const [colorTheme, setColorTheme] = useState<ColorTheme>(() => {\n    if (typeof window === 'undefined') return defaultColorTheme;\n    return (localStorage.getItem(colorThemeStorageKey) as ColorTheme) || defaultColorTheme;\n  });\n  const [spacingTheme, setSpacingTheme] = useState<SpacingTheme>(() => {\n    if (typeof window === 'undefined') return defaultSpacingTheme;\n    return (localStorage.getItem(spacingThemeStorageKey) as SpacingTheme) || defaultSpacingTheme;\n  });\n\n  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');\n\n  const [customColors, setCustomColors] = useState<CustomThemeColors | undefined>(\n    initialCustomColors,\n  );\n\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    const applyTheme = (t: Theme) => {\n      root.classList.remove('light', 'dark');\n\n      if (t === 'system') {\n        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches\n          ? 'dark'\n          : 'light';\n\n        root.classList.add(systemTheme);\n        setResolvedTheme(systemTheme);\n        return;\n      }\n\n      root.classList.add(t);\n      setResolvedTheme(t as 'light' | 'dark');\n    };\n\n    applyTheme(theme);\n\n    // Listen for system changes if set to system\n    if (theme === 'system') {\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n      const handleChange = () => applyTheme('system');\n\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    }\n  }, [theme]);\n\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    // 既存のカラーテーマクラスを削除\n    root.classList.remove('theme-blue', 'theme-green', 'theme-rose', 'theme-orange', 'theme-future');\n\n    // デフォルト以外の場合はクラスを追加\n    if (colorTheme !== 'default') {\n      root.classList.add(`theme-${colorTheme}`);\n    }\n  }, [colorTheme]);\n\n  // スペーシングテーマを適用\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    // 既存のスペーシングクラスを削除\n    root.classList.remove('spacing-compact', 'spacing-normal', 'spacing-comfortable');\n\n    // スペーシングテーマクラスを追加\n    root.classList.add(`spacing-${spacingTheme}`);\n  }, [spacingTheme]);\n\n  // カスタムカラーをCSS変数として適用\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    if (customColors) {\n      // CSS変数を設定\n      Object.entries(customColors).forEach(([key, value]) => {\n        if (value) {\n          root.style.setProperty(`--${key}`, value);\n        }\n      });\n    }\n\n    // クリーンアップ: カスタムカラーが削除された場合は元に戻す\n    return () => {\n      if (customColors) {\n        Object.keys(customColors).forEach((key) => {\n          root.style.removeProperty(`--${key}`);\n        });\n      }\n    };\n  }, [customColors]);\n\n  const value = {\n    theme,\n    resolvedTheme,\n    setTheme: (theme: Theme) => {\n      localStorage.setItem(storageKey, theme);\n      setTheme(theme);\n    },\n    colorTheme,\n    setColorTheme: (colorTheme: ColorTheme) => {\n      localStorage.setItem(colorThemeStorageKey, colorTheme);\n      setColorTheme(colorTheme);\n    },\n    spacingTheme,\n    setSpacingTheme: (spacingTheme: SpacingTheme) => {\n      localStorage.setItem(spacingThemeStorageKey, spacingTheme);\n      setSpacingTheme(spacingTheme);\n    },\n    customColors,\n    setCustomColors,\n  };\n\n  return (\n    <ThemeProviderContext.Provider {...props} value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n"],"mappings":";;;;;AA4DA,SAAgBA,EAAc,EAC5B,aACA,kBAAe,UACf,uBAAoB,WACpB,yBAAsB,UACtB,cAAcC,GACd,gBAAa,iBACb,0BAAuB,uBACvB,4BAAyB,yBACzB,GAAGC,KACkB;CAErB,IAAM,CAACC,GAAOC,KAAYC,QACpB,OAAO,SAAW,MAAoBC,IAClC,aAAa,QAAQC,CAAU,KAAeD,CACvD,GACK,CAACE,GAAYC,KAAiBJ,QAC9B,OAAO,SAAW,MAAoBK,IAClC,aAAa,QAAQC,CAAoB,KAAoBD,CACtE,GACK,CAACE,GAAcC,KAAmBR,QAClC,OAAO,SAAW,MAAoBS,IAClC,aAAa,QAAQC,CAAsB,KAAsBD,CAC1E,GAEK,CAACE,GAAeC,KAAoBZ,EAA2B,OAAO,GAEtE,CAACa,GAAcC,KAAmBd,EACtCJ,CACF;CA0DA,AAxDAmB,QAAgB;EACd,IAAMC,IAAO,OAAO,SAAS,iBAEvBC,KAAc,MAAa;GAG/B,IAFAD,EAAK,UAAU,OAAO,SAAS,MAAM,GAEjC,MAAM,UAAU;IAClB,IAAME,IAAc,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAClE,SACA;IAGJ,AADAF,EAAK,UAAU,IAAIE,CAAW,GAC9BN,EAAiBM,CAAW;GAE9B,OAGA,AADAF,EAAK,UAAU,IAAI,CAAC,GACpBJ,EAAiB,CAAqB;EACxC;EAKA,IAHAK,EAAWnB,CAAK,GAGZA,MAAU,UAAU;GACtB,IAAMqB,IAAa,OAAO,WAAW,8BAA8B,GAC7DC,UAAqBH,EAAW,QAAQ;GAG9C,OADAE,EAAW,iBAAiB,UAAUC,CAAY,SACrCD,EAAW,oBAAoB,UAAUC,CAAY;EACpE;CACF,GAAG,CAACtB,CAAK,CAAC,GAEViB,QAAgB;EACd,IAAMC,IAAO,OAAO,SAAS;EAM7B,AAHAA,EAAK,UAAU,OAAO,cAAc,eAAe,cAAc,gBAAgB,cAAc,GAG3Fb,MAAe,aACjBa,EAAK,UAAU,IAAI,SAASb,GAAY;CAE5C,GAAG,CAACA,CAAU,CAAC,GAGfY,QAAgB;EACd,IAAMC,IAAO,OAAO,SAAS;EAM7B,AAHAA,EAAK,UAAU,OAAO,mBAAmB,kBAAkB,qBAAqB,GAGhFA,EAAK,UAAU,IAAI,WAAWT,GAAc;CAC9C,GAAG,CAACA,CAAY,CAAC,GAGjBQ,QAAgB;EACd,IAAMC,IAAO,OAAO,SAAS;EAY7B,OAVIH,KAEF,OAAO,QAAQA,CAAY,CAAC,CAAC,SAAS,CAACQ,GAAKC,OAAW;GACrD,AAAIA,KACFN,EAAK,MAAM,YAAY,KAAKK,KAAOC,CAAK;EAE5C,CAAC,SAIU;GACX,AAAIT,KACF,OAAO,KAAKA,CAAY,CAAC,CAAC,SAAS,MAAQ;IACzC,EAAK,MAAM,eAAe,KAAKQ,GAAK;GACtC,CAAC;EAEL;CACF,GAAG,CAACR,CAAY,CAAC;CAEjB,IAAMS,IAAQ;EACZ;EACA;EACA,WAAW,MAAiB;GAE1B,AADA,aAAa,QAAQpB,GAAYJ,CAAK,GACtCC,EAASD,CAAK;EAChB;EACA;EACA,gBAAgB,MAA2B;GAEzC,AADA,aAAa,QAAQQ,GAAsBH,CAAU,GACrDC,EAAcD,CAAU;EAC1B;EACA;EACA,kBAAkB,MAA+B;GAE/C,AADA,aAAa,QAAQO,GAAwBH,CAAY,GACzDC,EAAgBD,CAAY;EAC9B;EACA;EACA;CACF;CAEA,OACE,kBAACgB,EAAqB,UAAtB;EAA+B,GAAI1B;EAAc;EAC9C;CAC4B,CAAA;AAEnC"}

package/dist/ui/components/theme/theme-script.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme-script.cjs","names":["react_jsx_runtime","ThemeScript"],"sources":["../../../../src/ui/components/theme/theme-script.tsx"],"sourcesContent":["/**\n * 初期レンダリング時の画面のちらつき（FOUC）を防ぐため、HTMLの読み込み直後にローカルストレージやシステム設定からテーマ（ダーク/ライト、カラー、スペース等）を読み込み、適用するためのインラインスクリプトコンポーネント。\n */\nexport function ThemeScript() {\n  const script = `\n    (function() {\n      try {\n        var storageKey = \"vite-ui-theme\";\n        var colorKey = \"vite-ui-color-theme\";\n        var spacingKey = \"vite-ui-spacing-theme\";\n        \n        var theme = localStorage.getItem(storageKey);\n        var colorTheme = localStorage.getItem(colorKey);\n        var spacingTheme = localStorage.getItem(spacingKey);\n        \n        var supportDarkMode = window.matchMedia(\"(prefers-color-scheme: dark)\").matches === true;\n        \n        if (!theme || theme === \"system\") {\n          if (supportDarkMode) {\n            document.documentElement.classList.add(\"dark\");\n          } else {\n            document.documentElement.classList.add(\"light\");\n          }\n        } else {\n          document.documentElement.classList.add(theme);\n        }\n        \n        if (colorTheme && colorTheme !== \"default\") {\n          document.documentElement.classList.add(\"theme-\" + colorTheme);\n        }\n        \n        if (spacingTheme) {\n            document.documentElement.classList.add(\"spacing-\" + spacingTheme);\n        } else {\n            document.documentElement.classList.add(\"spacing-normal\");\n        }\n      } catch (e) {}\n    })();\n  `;\n\n  return (\n    <script\n      dangerouslySetInnerHTML={{\n        __html: script,\n      }}\n    />\n  );\n}\n"],"mappings":"A,mHAGA,SAAgBC,GAAc,CAqC5B,OACE,EAAAD,EAAA,IAAA,CAAC,SAAD,CACE,wBAAyB,CACvB,OAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GACV,CACD,CAAA,CAEL,C"}
+{"version":3,"file":"theme-script.cjs","names":["react_jsx_runtime","ThemeScript"],"sources":["../../../../src/ui/components/theme/theme-script.tsx"],"sourcesContent":["/**\n * Emits an inline script that applies stored theme classes before client rendering.\n *\n * @returns Script element whose contents read localStorage and prefers-color-scheme.\n *\n * @remarks Uses only the fixed default vite-ui-theme, vite-ui-color-theme and\n * vite-ui-spacing-theme keys, even if ThemeProvider uses custom keys. It adds root\n * classes without first removing existing classes; failures are swallowed. It does not\n * apply custom colors. Place early in server HTML and allow this script under the host\n * CSP; no nonce prop is accepted. Import Appkit styles in the host.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeScript } from '@alneas/appkit-react/ui/theme';\n * export function DocumentHead() { return <head><ThemeScript /></head>; }\n * ```\n */\nexport function ThemeScript() {\n  const script = `\n    (function() {\n      try {\n        var storageKey = \"vite-ui-theme\";\n        var colorKey = \"vite-ui-color-theme\";\n        var spacingKey = \"vite-ui-spacing-theme\";\n        \n        var theme = localStorage.getItem(storageKey);\n        var colorTheme = localStorage.getItem(colorKey);\n        var spacingTheme = localStorage.getItem(spacingKey);\n        \n        var supportDarkMode = window.matchMedia(\"(prefers-color-scheme: dark)\").matches === true;\n        \n        if (!theme || theme === \"system\") {\n          if (supportDarkMode) {\n            document.documentElement.classList.add(\"dark\");\n          } else {\n            document.documentElement.classList.add(\"light\");\n          }\n        } else {\n          document.documentElement.classList.add(theme);\n        }\n        \n        if (colorTheme && colorTheme !== \"default\") {\n          document.documentElement.classList.add(\"theme-\" + colorTheme);\n        }\n        \n        if (spacingTheme) {\n            document.documentElement.classList.add(\"spacing-\" + spacingTheme);\n        } else {\n            document.documentElement.classList.add(\"spacing-normal\");\n        }\n      } catch (e) {}\n    })();\n  `;\n\n  return (\n    <script\n      dangerouslySetInnerHTML={{\n        __html: script,\n      }}\n    />\n  );\n}\n"],"mappings":"A,mHAkBA,SAAgBC,GAAc,CAqC5B,OACE,EAAAD,EAAA,IAAA,CAAC,SAAD,CACE,wBAAyB,CACvB,OAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GACV,CACD,CAAA,CAEL,C"}

package/dist/ui/components/theme/theme-script.d.cts

@@ -1,4 +1,19 @@
 /**
- * 初期レンダリング時の画面のちらつき（FOUC）を防ぐため、HTMLの読み込み直後にローカルストレージやシステム設定からテーマ（ダーク/ライト、カラー、スペース等）を読み込み、適用するためのインラインスクリプトコンポーネント。
+ * Emits an inline script that applies stored theme classes before client rendering.
+ *
+ * @returns Script element whose contents read localStorage and prefers-color-scheme.
+ *
+ * @remarks Uses only the fixed default vite-ui-theme, vite-ui-color-theme and
+ * vite-ui-spacing-theme keys, even if ThemeProvider uses custom keys. It adds root
+ * classes without first removing existing classes; failures are swallowed. It does not
+ * apply custom colors. Place early in server HTML and allow this script under the host
+ * CSP; no nonce prop is accepted. Import Appkit styles in the host.
+ *
+ * @example
+ * ```tsx
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeScript } from '@alneas/appkit-react/ui/theme';
+ * export function DocumentHead() { return <head><ThemeScript /></head>; }
+ * ```
  */
 export declare function ThemeScript(): import('react').JSX.Element;

package/dist/ui/components/theme/theme-script.d.ts

@@ -1,4 +1,19 @@
 /**
- * 初期レンダリング時の画面のちらつき（FOUC）を防ぐため、HTMLの読み込み直後にローカルストレージやシステム設定からテーマ（ダーク/ライト、カラー、スペース等）を読み込み、適用するためのインラインスクリプトコンポーネント。
+ * Emits an inline script that applies stored theme classes before client rendering.
+ *
+ * @returns Script element whose contents read localStorage and prefers-color-scheme.
+ *
+ * @remarks Uses only the fixed default vite-ui-theme, vite-ui-color-theme and
+ * vite-ui-spacing-theme keys, even if ThemeProvider uses custom keys. It adds root
+ * classes without first removing existing classes; failures are swallowed. It does not
+ * apply custom colors. Place early in server HTML and allow this script under the host
+ * CSP; no nonce prop is accepted. Import Appkit styles in the host.
+ *
+ * @example
+ * ```tsx
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeScript } from '@alneas/appkit-react/ui/theme';
+ * export function DocumentHead() { return <head><ThemeScript /></head>; }
+ * ```
  */
 export declare function ThemeScript(): import('react').JSX.Element;

package/dist/ui/components/theme/theme-script.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-script.js","names":["ThemeScript"],"sources":["../../../../src/ui/components/theme/theme-script.tsx"],"sourcesContent":["/**\n * 初期レンダリング時の画面のちらつき（FOUC）を防ぐため、HTMLの読み込み直後にローカルストレージやシステム設定からテーマ（ダーク/ライト、カラー、スペース等）を読み込み、適用するためのインラインスクリプトコンポーネント。\n */\nexport function ThemeScript() {\n  const script = `\n    (function() {\n      try {\n        var storageKey = \"vite-ui-theme\";\n        var colorKey = \"vite-ui-color-theme\";\n        var spacingKey = \"vite-ui-spacing-theme\";\n        \n        var theme = localStorage.getItem(storageKey);\n        var colorTheme = localStorage.getItem(colorKey);\n        var spacingTheme = localStorage.getItem(spacingKey);\n        \n        var supportDarkMode = window.matchMedia(\"(prefers-color-scheme: dark)\").matches === true;\n        \n        if (!theme || theme === \"system\") {\n          if (supportDarkMode) {\n            document.documentElement.classList.add(\"dark\");\n          } else {\n            document.documentElement.classList.add(\"light\");\n          }\n        } else {\n          document.documentElement.classList.add(theme);\n        }\n        \n        if (colorTheme && colorTheme !== \"default\") {\n          document.documentElement.classList.add(\"theme-\" + colorTheme);\n        }\n        \n        if (spacingTheme) {\n            document.documentElement.classList.add(\"spacing-\" + spacingTheme);\n        } else {\n            document.documentElement.classList.add(\"spacing-normal\");\n        }\n      } catch (e) {}\n    })();\n  `;\n\n  return (\n    <script\n      dangerouslySetInnerHTML={{\n        __html: script,\n      }}\n    />\n  );\n}\n"],"mappings":";;;AAGA,SAAgBA,IAAc;CAqC5B,OACE,kBAAC,UAAD,EACE,yBAAyB,EACvB,QAAQ,8sCACV,EACD,CAAA;AAEL"}
+{"version":3,"file":"theme-script.js","names":["ThemeScript"],"sources":["../../../../src/ui/components/theme/theme-script.tsx"],"sourcesContent":["/**\n * Emits an inline script that applies stored theme classes before client rendering.\n *\n * @returns Script element whose contents read localStorage and prefers-color-scheme.\n *\n * @remarks Uses only the fixed default vite-ui-theme, vite-ui-color-theme and\n * vite-ui-spacing-theme keys, even if ThemeProvider uses custom keys. It adds root\n * classes without first removing existing classes; failures are swallowed. It does not\n * apply custom colors. Place early in server HTML and allow this script under the host\n * CSP; no nonce prop is accepted. Import Appkit styles in the host.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeScript } from '@alneas/appkit-react/ui/theme';\n * export function DocumentHead() { return <head><ThemeScript /></head>; }\n * ```\n */\nexport function ThemeScript() {\n  const script = `\n    (function() {\n      try {\n        var storageKey = \"vite-ui-theme\";\n        var colorKey = \"vite-ui-color-theme\";\n        var spacingKey = \"vite-ui-spacing-theme\";\n        \n        var theme = localStorage.getItem(storageKey);\n        var colorTheme = localStorage.getItem(colorKey);\n        var spacingTheme = localStorage.getItem(spacingKey);\n        \n        var supportDarkMode = window.matchMedia(\"(prefers-color-scheme: dark)\").matches === true;\n        \n        if (!theme || theme === \"system\") {\n          if (supportDarkMode) {\n            document.documentElement.classList.add(\"dark\");\n          } else {\n            document.documentElement.classList.add(\"light\");\n          }\n        } else {\n          document.documentElement.classList.add(theme);\n        }\n        \n        if (colorTheme && colorTheme !== \"default\") {\n          document.documentElement.classList.add(\"theme-\" + colorTheme);\n        }\n        \n        if (spacingTheme) {\n            document.documentElement.classList.add(\"spacing-\" + spacingTheme);\n        } else {\n            document.documentElement.classList.add(\"spacing-normal\");\n        }\n      } catch (e) {}\n    })();\n  `;\n\n  return (\n    <script\n      dangerouslySetInnerHTML={{\n        __html: script,\n      }}\n    />\n  );\n}\n"],"mappings":";;;AAkBA,SAAgBA,IAAc;CAqC5B,OACE,kBAAC,UAAD,EACE,yBAAyB,EACvB,QAAQ,8sCACV,EACD,CAAA;AAEL"}

package/dist/ui/components/theme/theme-switcher.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../lib/utils.cjs"),t=require("../ui/button-components.cjs"),n=require("./theme-context.cjs"),r=require("../../lib/hooks/use-is-client.cjs");let i=require("react/jsx-runtime"),a=require("lucide-react");function o({className:o,variant:s=`select`,withBackground:c=!1}){let{theme:l,setTheme:u,resolvedTheme:d}=n.useTheme(),f=r.useIsClient(),p=[{value:`light`,label:`Light`,icon:a.Sun},{value:`dark`,label:`Dark`,icon:a.Moon},{value:`system`,label:`System`,icon:a.Monitor}],m=()=>{let e=(p.findIndex(e=>e.value===l)+1)%p.length;u(p[e].value)},h=c?`text-foreground`:``;if(s===`toggle`||s===`cycle`){let n=f?d===`dark`:!1;return(0,i.jsxs)(t.Button,{variant:`ghost`,size:`icon`,className:e.cn(o,c&&`bg-background/80 hover:bg-background`),onClick:m,title:f?`Current theme: ${l} (${d})`:`Toggle theme`,children:[(0,i.jsxs)(`div`,{className:`relative h-5 w-5 flex items-center justify-center`,children:[(0,i.jsx)(a.Sun,{className:e.cn(`h-5 w-5 transition-all`,h,n?`rotate-90 scale-0 opacity-0`:`rotate-0 scale-100 opacity-100`)}),(0,i.jsx)(a.Moon,{className:e.cn(`absolute h-5 w-5 transition-all`,h,n?`rotate-0 scale-100 opacity-100`:`-rotate-90 scale-0 opacity-0`)})]}),(0,i.jsx)(`span`,{className:`sr-only`,children:`Toggle theme`})]})}if(s===`icon-group`){let n=f?l:`system`;return(0,i.jsx)(`div`,{className:e.cn(`flex items-center gap-1 border rounded-md p-1`,c?`bg-background`:`bg-transparent border-0`,o),children:p.map(e=>(0,i.jsxs)(t.Button,{variant:n===e.value?`secondary`:`ghost`,size:`icon`,className:`h-7 w-7`,onClick:()=>u(e.value),title:e.label,children:[(0,i.jsx)(e.icon,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{className:`sr-only`,children:e.label})]},e.value))})}let g=f?l:`system`;return(0,i.jsxs)(`select`,{className:e.cn(`h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`,o),value:g,onChange:e=>u(e.target.value),children:[(0,i.jsx)(`option`,{value:`light`,children:`Light`}),(0,i.jsx)(`option`,{value:`dark`,children:`Dark`}),(0,i.jsx)(`option`,{value:`system`,children:`System`})]})}function s({className:o,variant:s=`select`,withBackground:c=!1}){let{colorTheme:l,setColorTheme:u}=n.useTheme(),d=r.useIsClient(),f=[{value:`default`,label:`Default`,color:`bg-zinc-600`},{value:`blue`,label:`Blue`,color:`bg-blue-500`},{value:`green`,label:`Green`,color:`bg-green-500`},{value:`rose`,label:`Rose`,color:`bg-rose-500`},{value:`orange`,label:`Orange`,color:`bg-orange-500`}],p=d?l:`default`,m=()=>{let e=(f.findIndex(e=>e.value===l)+1)%f.length;u(f[e].value)},h=f.find(e=>e.value===p)||f[0];return s===`toggle`||s===`cycle`?c?(0,i.jsxs)(t.Button,{variant:`ghost`,size:`icon`,className:e.cn(`ring-2 ring-inset ring-white/80 hover:ring-white`,h.color,`hover:opacity-90`,o),onClick:m,title:`Color: ${h.label} (Click to cycle)`,"aria-label":`Current color: ${h.label}. Click to cycle.`,children:[(0,i.jsx)(a.Palette,{className:`h-5 w-5 text-white`}),(0,i.jsx)(`span`,{className:`sr-only`,children:h.label})]}):(0,i.jsxs)(t.Button,{variant:`ghost`,size:`icon`,className:o,onClick:m,title:`Color: ${h.label} (Click to cycle)`,"aria-label":`Current color: ${h.label}. Click to cycle.`,children:[(0,i.jsx)(a.Palette,{className:e.cn(`h-5 w-5`,h.color.replace(`bg-`,`text-`))}),(0,i.jsx)(`span`,{className:`sr-only`,children:h.label})]}):s===`icon-group`?(0,i.jsx)(`div`,{className:e.cn(`flex items-center gap-2 flex-wrap`,c?`bg-background p-1 rounded-md border`:``,o),children:f.map(t=>(0,i.jsx)(`button`,{className:e.cn(`h-6 w-6 rounded-full border border-input ring-offset-background hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,t.color,p===t.value&&`ring-2 ring-ring ring-offset-2`),onClick:()=>u(t.value),title:t.label,"aria-label":t.label,children:p===t.value&&(0,i.jsx)(a.Check,{className:`h-3 w-3 text-white mx-auto`,strokeWidth:3})},t.value))}):(0,i.jsx)(`select`,{className:o,value:p,onChange:e=>u(e.target.value),children:f.map(e=>(0,i.jsx)(`option`,{value:e.value,children:e.label},e.value))})}function c({className:o,variant:s=`select`,withBackground:c=!1}){let{spacingTheme:l,setSpacingTheme:u}=n.useTheme(),d=r.useIsClient()?l:`normal`,f=[{value:`compact`,label:`Compact`,icon:a.Rows4},{value:`normal`,label:`Normal`,icon:a.Rows3},{value:`comfortable`,label:`Comfortable`,icon:a.Rows2}],p=()=>{let e=(f.findIndex(e=>e.value===l)+1)%f.length;u(f[e].value)},m=c?`text-foreground`:``;if(s===`toggle`||s===`cycle`){let n=f.find(e=>e.value===d)||f[1],r=n.icon;return(0,i.jsxs)(t.Button,{variant:`ghost`,size:`icon`,className:e.cn(o,c&&`bg-background/80 hover:bg-background`),onClick:p,title:`Spacing: ${n.label} (Click to cycle)`,"aria-label":`Current spacing: ${n.label}. Click to cycle.`,children:[(0,i.jsx)(r,{className:e.cn(`h-5 w-5`,m)}),(0,i.jsx)(`span`,{className:`sr-only`,children:n.label})]})}return s===`icon-group`?(0,i.jsx)(`div`,{className:e.cn(`flex items-center gap-1 border rounded-md p-1`,c?`bg-background`:`bg-transparent border-0`,o),children:f.map(e=>(0,i.jsxs)(t.Button,{variant:d===e.value?`secondary`:`ghost`,size:`icon`,className:`h-7 w-7`,onClick:()=>u(e.value),title:e.label,children:[(0,i.jsx)(e.icon,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{className:`sr-only`,children:e.label})]},e.value))}):(0,i.jsxs)(`select`,{className:o,value:d,onChange:e=>u(e.target.value),children:[(0,i.jsx)(`option`,{value:`compact`,children:`Compact`}),(0,i.jsx)(`option`,{value:`normal`,children:`Normal`}),(0,i.jsx)(`option`,{value:`comfortable`,children:`Comfortable`})]})}function l({className:t,selectClassName:n=`h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`,showThemeMode:r=!0,showColorTheme:a=!0,showSpacingTheme:l=!0,modeVariant:u=`select`,colorVariant:d=`select`,spacingVariant:f=`select`}){return(0,i.jsxs)(`div`,{className:e.cn(t,`flex flex-col gap-3`),children:[r&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Mode`}),(0,i.jsx)(o,{className:u===`select`?n:void 0,variant:u})]}),a&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Color`}),(0,i.jsx)(s,{className:d===`select`?n:void 0,variant:d})]}),l&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Density`}),(0,i.jsx)(c,{className:f===`select`?n:void 0,variant:f})]})]})}exports.ColorThemeSwitcher=s,exports.SpacingThemeSwitcher=c,exports.ThemeModeSwitcher=o,exports.ThemeSwitcherGroup=l;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../lib/utils.cjs"),t=require("../ui/button-components.cjs"),n=require("./theme-context.cjs"),r=require("../../lib/hooks/use-is-client.cjs");let i=require("react/jsx-runtime"),a=require("lucide-react");function o({className:o,variant:s=`select`,withBackground:c=!1}){let{theme:l,setTheme:u,resolvedTheme:d}=n.useTheme(),f=r.useIsClient(),p=[{value:`light`,label:`Light`,icon:a.Sun},{value:`dark`,label:`Dark`,icon:a.Moon},{value:`system`,label:`System`,icon:a.Monitor}],m=()=>{let e=(p.findIndex(e=>e.value===l)+1)%p.length;u(p[e].value)},h=c?`text-foreground`:``;if(s===`toggle`||s===`cycle`){let n=f?d===`dark`:!1;return(0,i.jsxs)(t.Button,{variant:`ghost`,size:`icon`,className:e.cn(o,c&&`bg-background/80 hover:bg-background`),onClick:m,title:f?`Current theme: ${l} (${d})`:`Toggle theme`,children:[(0,i.jsxs)(`div`,{className:`relative h-5 w-5 flex items-center justify-center`,children:[(0,i.jsx)(a.Sun,{className:e.cn(`h-5 w-5 transition-all`,h,n?`rotate-90 scale-0 opacity-0`:`rotate-0 scale-100 opacity-100`)}),(0,i.jsx)(a.Moon,{className:e.cn(`absolute h-5 w-5 transition-all`,h,n?`rotate-0 scale-100 opacity-100`:`-rotate-90 scale-0 opacity-0`)})]}),(0,i.jsx)(`span`,{className:`sr-only`,children:`Toggle theme`})]})}if(s===`icon-group`){let n=f?l:`system`;return(0,i.jsx)(`div`,{className:e.cn(`flex items-center gap-1 border rounded-md p-1`,c?`bg-background`:`bg-transparent border-0`,o),children:p.map(e=>(0,i.jsxs)(t.Button,{variant:n===e.value?`secondary`:`ghost`,size:`icon`,className:`h-7 w-7`,onClick:()=>u(e.value),title:e.label,children:[(0,i.jsx)(e.icon,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{className:`sr-only`,children:e.label})]},e.value))})}let g=f?l:`system`;return(0,i.jsxs)(`select`,{"aria-label":`Mode`,className:e.cn(`h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`,o),value:g,onChange:e=>u(e.target.value),children:[(0,i.jsx)(`option`,{value:`light`,children:`Light`}),(0,i.jsx)(`option`,{value:`dark`,children:`Dark`}),(0,i.jsx)(`option`,{value:`system`,children:`System`})]})}function s({className:o,variant:s=`select`,withBackground:c=!1}){let{colorTheme:l,setColorTheme:u}=n.useTheme(),d=r.useIsClient(),f=[{value:`default`,label:`Default`,color:`bg-zinc-600`},{value:`blue`,label:`Blue`,color:`bg-blue-500`},{value:`green`,label:`Green`,color:`bg-green-500`},{value:`rose`,label:`Rose`,color:`bg-rose-500`},{value:`orange`,label:`Orange`,color:`bg-orange-500`},{value:`future`,label:`Future`,color:`bg-cyan-500`}],p=d?l:`default`,m=()=>{let e=(f.findIndex(e=>e.value===l)+1)%f.length;u(f[e].value)},h=f.find(e=>e.value===p)||f[0];return s===`toggle`||s===`cycle`?c?(0,i.jsxs)(t.Button,{variant:`ghost`,size:`icon`,className:e.cn(`ring-2 ring-inset ring-white/80 hover:ring-white`,h.color,`hover:opacity-90`,o),onClick:m,title:`Color: ${h.label} (Click to cycle)`,"aria-label":`Current color: ${h.label}. Click to cycle.`,children:[(0,i.jsx)(a.Palette,{className:`h-5 w-5 text-white`}),(0,i.jsx)(`span`,{className:`sr-only`,children:h.label})]}):(0,i.jsxs)(t.Button,{variant:`ghost`,size:`icon`,className:o,onClick:m,title:`Color: ${h.label} (Click to cycle)`,"aria-label":`Current color: ${h.label}. Click to cycle.`,children:[(0,i.jsx)(a.Palette,{className:e.cn(`h-5 w-5`,h.color.replace(`bg-`,`text-`))}),(0,i.jsx)(`span`,{className:`sr-only`,children:h.label})]}):s===`icon-group`?(0,i.jsx)(`div`,{className:e.cn(`flex items-center gap-2 flex-wrap`,c?`bg-background p-1 rounded-md border`:``,o),children:f.map(t=>(0,i.jsx)(`button`,{className:e.cn(`h-6 w-6 rounded-full border border-input ring-offset-background hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,t.color,p===t.value&&`ring-2 ring-ring ring-offset-2`),onClick:()=>u(t.value),title:t.label,"aria-label":t.label,children:p===t.value&&(0,i.jsx)(a.Check,{className:`h-3 w-3 text-white mx-auto`,strokeWidth:3})},t.value))}):(0,i.jsx)(`select`,{"aria-label":`Color`,className:o,value:p,onChange:e=>u(e.target.value),children:f.map(e=>(0,i.jsx)(`option`,{value:e.value,children:e.label},e.value))})}function c({className:o,variant:s=`select`,withBackground:c=!1}){let{spacingTheme:l,setSpacingTheme:u}=n.useTheme(),d=r.useIsClient()?l:`normal`,f=[{value:`compact`,label:`Compact`,icon:a.Rows4},{value:`normal`,label:`Normal`,icon:a.Rows3},{value:`comfortable`,label:`Comfortable`,icon:a.Rows2}],p=()=>{let e=(f.findIndex(e=>e.value===l)+1)%f.length;u(f[e].value)},m=c?`text-foreground`:``;if(s===`toggle`||s===`cycle`){let n=f.find(e=>e.value===d)||f[1],r=n.icon;return(0,i.jsxs)(t.Button,{variant:`ghost`,size:`icon`,className:e.cn(o,c&&`bg-background/80 hover:bg-background`),onClick:p,title:`Spacing: ${n.label} (Click to cycle)`,"aria-label":`Current spacing: ${n.label}. Click to cycle.`,children:[(0,i.jsx)(r,{className:e.cn(`h-5 w-5`,m)}),(0,i.jsx)(`span`,{className:`sr-only`,children:n.label})]})}return s===`icon-group`?(0,i.jsx)(`div`,{className:e.cn(`flex items-center gap-1 border rounded-md p-1`,c?`bg-background`:`bg-transparent border-0`,o),children:f.map(e=>(0,i.jsxs)(t.Button,{variant:d===e.value?`secondary`:`ghost`,size:`icon`,className:`h-7 w-7`,onClick:()=>u(e.value),title:e.label,children:[(0,i.jsx)(e.icon,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{className:`sr-only`,children:e.label})]},e.value))}):(0,i.jsxs)(`select`,{"aria-label":`Density`,className:o,value:d,onChange:e=>u(e.target.value),children:[(0,i.jsx)(`option`,{value:`compact`,children:`Compact`}),(0,i.jsx)(`option`,{value:`normal`,children:`Normal`}),(0,i.jsx)(`option`,{value:`comfortable`,children:`Comfortable`})]})}function l({className:t,selectClassName:n=`h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`,showThemeMode:r=!0,showColorTheme:a=!0,showSpacingTheme:l=!0,modeVariant:u=`select`,colorVariant:d=`select`,spacingVariant:f=`select`}){return(0,i.jsxs)(`div`,{className:e.cn(t,`flex flex-col gap-3`),children:[r&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Mode`}),(0,i.jsx)(o,{className:u===`select`?n:void 0,variant:u})]}),a&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Color`}),(0,i.jsx)(s,{className:d===`select`?n:void 0,variant:d})]}),l&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Density`}),(0,i.jsx)(c,{className:f===`select`?n:void 0,variant:f})]})]})}exports.ColorThemeSwitcher=s,exports.SpacingThemeSwitcher=c,exports.ThemeModeSwitcher=o,exports.ThemeSwitcherGroup=l;
 //# sourceMappingURL=theme-switcher.cjs.map

package/dist/ui/components/theme/theme-switcher.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme-switcher.cjs","names":["useTheme","useIsClient","Sun","Moon","Monitor","Button","cn","Palette","Check","Rows4","Rows3","Rows2","require_ui_lib_utils","require_ui_components_ui_button_components","require_ui_components_theme_theme_context","require_ui_lib_hooks_use_is_client","react_jsx_runtime","lucide_react","ThemeModeSwitcher","isClient","modes","handleCycle","nextIndex","m","theme","setTheme","iconColorClass","withBackground","variant","isDark","resolvedTheme","className","activeTheme","selectValue","ColorThemeSwitcher","colors","activeColorTheme","colorTheme","c","setColorTheme","currentColor","SpacingThemeSwitcher","activeSpacingTheme","spacingTheme","spacings","s","setSpacingTheme","currentSpacing","IconComponent","ThemeSwitcherGroup","showThemeMode","modeVariant","selectClassName","showColorTheme","colorVariant","showSpacingTheme","spacingVariant"],"sources":["../../../../src/ui/components/theme/theme-switcher.tsx"],"sourcesContent":["import { Moon, Sun, Monitor, Check, Rows2, Rows3, Rows4, Palette } from 'lucide-react';\nimport { useTheme } from './theme-context';\nimport { Button } from '../ui/button';\nimport { cn } from \"../../lib/utils\";\nimport { useIsClient } from \"../../lib/hooks/use-is-client\";\n\n/**\n * テーマスイッチャーのプロップス\n */\nexport interface ThemeSwitcherProps {\n  /** 追加CSS */\n  className?: string;\n  /** 表示形式 */\n  variant?: 'select' | 'toggle' | 'icon-group' | 'cycle';\n  /**\n   * アイコンに背景を表示するか\n   * 暗い背景に配置する場合、trueにすると視認性が向上します\n   */\n  withBackground?: boolean;\n}\n\n/**\n * テーマモードスイッチャー\n *\n * ライト/ダーク/システムを切り替えるUI。\n *\n * @example\n * ```tsx\n * import { ThemeModeSwitcher } from \"../..\";\n *\n * <ThemeModeSwitcher variant=\"toggle\" />\n * ```\n */\nexport function ThemeModeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n  const isClient = useIsClient();\n\n  const modes: Array<{\n    value: 'light' | 'dark' | 'system';\n    label: string;\n    icon: typeof Sun;\n  }> = [\n    { value: 'light', label: 'Light', icon: Sun },\n    { value: 'dark', label: 'Dark', icon: Moon },\n    { value: 'system', label: 'System', icon: Monitor },\n  ];\n\n  const handleCycle = () => {\n    const currentIndex = modes.findIndex((m) => m.value === theme);\n    const nextIndex = (currentIndex + 1) % modes.length;\n    setTheme(modes[nextIndex].value);\n  };\n\n  // Icon color: use explicit foreground when withBackground, otherwise inherit from parent\n  const iconColorClass = withBackground ? 'text-foreground' : '';\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    // SSR-safe: Use a consistent default for initial render\n    // After mount, use actual resolvedTheme\n    const isDark = isClient ? resolvedTheme === 'dark' : false;\n\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={cn(className, withBackground && 'bg-background/80 hover:bg-background')}\n        onClick={handleCycle}\n        title={isClient ? `Current theme: ${theme} (${resolvedTheme})` : 'Toggle theme'}\n      >\n        <div className='relative h-5 w-5 flex items-center justify-center'>\n          <Sun\n            className={cn(\n              'h-5 w-5 transition-all',\n              iconColorClass,\n              isDark ? 'rotate-90 scale-0 opacity-0' : 'rotate-0 scale-100 opacity-100',\n            )}\n          />\n          <Moon\n            className={cn(\n              'absolute h-5 w-5 transition-all',\n              iconColorClass,\n              isDark ? 'rotate-0 scale-100 opacity-100' : '-rotate-90 scale-0 opacity-0',\n            )}\n          />\n        </div>\n        <span className='sr-only'>Toggle theme</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    // SSR-safe: Use defaultTheme for initial render, actual theme after mount\n    const activeTheme = isClient ? theme : 'system';\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-1 border rounded-md p-1',\n          withBackground ? 'bg-background' : 'bg-transparent border-0',\n          className,\n        )}\n      >\n        {modes.map((m) => (\n          <Button\n            key={m.value}\n            variant={activeTheme === m.value ? 'secondary' : 'ghost'}\n            size='icon'\n            className='h-7 w-7'\n            onClick={() => setTheme(m.value)}\n            title={m.label}\n          >\n            <m.icon className='h-4 w-4' />\n            <span className='sr-only'>{m.label}</span>\n          </Button>\n        ))}\n      </div>\n    );\n  }\n\n  // SSR-safe: Use defaultTheme for initial render\n  const selectValue = isClient ? theme : 'system';\n  return (\n    <select\n      className={cn(\n        'h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n        className,\n      )}\n      value={selectValue}\n      onChange={(e) => setTheme(e.target.value as 'light' | 'dark' | 'system')}\n    >\n      <option value='light'>Light</option>\n      <option value='dark'>Dark</option>\n      <option value='system'>System</option>\n    </select>\n  );\n}\n\n/**\n * カラーテーマ（プライマリ色）を切り替えるUIコンポーネント\n */\nexport function ColorThemeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { colorTheme, setColorTheme } = useTheme();\n  const isClient = useIsClient();\n\n  const colors = [\n    { value: 'default', label: 'Default', color: 'bg-zinc-600' },\n    { value: 'blue', label: 'Blue', color: 'bg-blue-500' },\n    { value: 'green', label: 'Green', color: 'bg-green-500' },\n    { value: 'rose', label: 'Rose', color: 'bg-rose-500' },\n    { value: 'orange', label: 'Orange', color: 'bg-orange-500' },\n  ];\n\n  // SSR-safe: Use default for initial render\n  const activeColorTheme = isClient ? colorTheme : 'default';\n\n  const handleCycle = () => {\n    const currentIndex = colors.findIndex((c) => c.value === colorTheme);\n    const nextIndex = (currentIndex + 1) % colors.length;\n    setColorTheme(colors[nextIndex].value);\n  };\n\n  const currentColor = colors.find((c) => c.value === activeColorTheme) || colors[0];\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    // withBackground: colored background, white inset ring, white icon\n    // no background: just colored palette icon\n    if (withBackground) {\n      return (\n        <Button\n          variant='ghost'\n          size='icon'\n          className={cn(\n            'ring-2 ring-inset ring-white/80 hover:ring-white',\n            currentColor.color,\n            'hover:opacity-90',\n            className,\n          )}\n          onClick={handleCycle}\n          title={`Color: ${currentColor.label} (Click to cycle)`}\n          aria-label={`Current color: ${currentColor.label}. Click to cycle.`}\n        >\n          <Palette className='h-5 w-5 text-white' />\n          <span className='sr-only'>{currentColor.label}</span>\n        </Button>\n      );\n    }\n\n    // No background: just colored icon\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={className}\n        onClick={handleCycle}\n        title={`Color: ${currentColor.label} (Click to cycle)`}\n        aria-label={`Current color: ${currentColor.label}. Click to cycle.`}\n      >\n        <Palette className={cn('h-5 w-5', currentColor.color.replace('bg-', 'text-'))} />\n        <span className='sr-only'>{currentColor.label}</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-2 flex-wrap',\n          withBackground ? 'bg-background p-1 rounded-md border' : '',\n          className,\n        )}\n      >\n        {colors.map((c) => (\n          <button\n            key={c.value}\n            className={cn(\n              'h-6 w-6 rounded-full border border-input ring-offset-background hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n              c.color,\n              activeColorTheme === c.value && 'ring-2 ring-ring ring-offset-2',\n            )}\n            onClick={() => setColorTheme(c.value)}\n            title={c.label}\n            aria-label={c.label}\n          >\n            {activeColorTheme === c.value && (\n              <Check className='h-3 w-3 text-white mx-auto' strokeWidth={3} />\n            )}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <select\n      className={className}\n      value={activeColorTheme}\n      onChange={(e) => setColorTheme(e.target.value)}\n    >\n      {colors.map((c) => (\n        <option key={c.value} value={c.value}>\n          {c.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\n/**\n * 表示の密度（余白など）をコンパクト、ノーマル、コンフォタブルに切り替えるUIコンポーネント\n */\nexport function SpacingThemeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { spacingTheme, setSpacingTheme } = useTheme();\n  const isClient = useIsClient();\n\n  // SSR-safe: Use default for initial render\n  const activeSpacingTheme = isClient ? spacingTheme : 'normal';\n\n  const spacings: Array<{\n    value: 'compact' | 'normal' | 'comfortable';\n    label: string;\n    icon: typeof Rows2;\n  }> = [\n    { value: 'compact', label: 'Compact', icon: Rows4 }, // More rows = tighter spacing\n    { value: 'normal', label: 'Normal', icon: Rows3 }, // Medium\n    { value: 'comfortable', label: 'Comfortable', icon: Rows2 }, // Fewer rows = more spacing\n  ];\n\n  const handleCycle = () => {\n    const currentIndex = spacings.findIndex((s) => s.value === spacingTheme);\n    const nextIndex = (currentIndex + 1) % spacings.length;\n    setSpacingTheme(spacings[nextIndex].value);\n  };\n\n  // Icon color: use explicit foreground when withBackground, otherwise inherit from parent\n  const iconColorClass = withBackground ? 'text-foreground' : '';\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    const currentSpacing = spacings.find((s) => s.value === activeSpacingTheme) || spacings[1];\n    const IconComponent = currentSpacing.icon;\n\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={cn(className, withBackground && 'bg-background/80 hover:bg-background')}\n        onClick={handleCycle}\n        title={`Spacing: ${currentSpacing.label} (Click to cycle)`}\n        aria-label={`Current spacing: ${currentSpacing.label}. Click to cycle.`}\n      >\n        <IconComponent className={cn('h-5 w-5', iconColorClass)} />\n        <span className='sr-only'>{currentSpacing.label}</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-1 border rounded-md p-1',\n          withBackground ? 'bg-background' : 'bg-transparent border-0',\n          className,\n        )}\n      >\n        {spacings.map((s) => (\n          <Button\n            key={s.value}\n            variant={activeSpacingTheme === s.value ? 'secondary' : 'ghost'}\n            size='icon'\n            className='h-7 w-7'\n            onClick={() => setSpacingTheme(s.value)}\n            title={s.label}\n          >\n            <s.icon className='h-4 w-4' />\n            <span className='sr-only'>{s.label}</span>\n          </Button>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <select\n      className={className}\n      value={activeSpacingTheme}\n      onChange={(e) => setSpacingTheme(e.target.value as 'compact' | 'normal' | 'comfortable')}\n    >\n      <option value='compact'>Compact</option>\n      <option value='normal'>Normal</option>\n      <option value='comfortable'>Comfortable</option>\n    </select>\n  );\n}\n\nexport interface ThemeSwitcherGroupProps {\n  className?: string;\n  selectClassName?: string;\n  showThemeMode?: boolean;\n  showColorTheme?: boolean;\n  showSpacingTheme?: boolean;\n  modeVariant?: 'select' | 'toggle' | 'icon-group';\n  colorVariant?: 'select' | 'toggle' | 'icon-group';\n  spacingVariant?: 'select' | 'toggle' | 'icon-group';\n}\n\n/**\n * モード、カラー、表示密度の複数のテーマ設定をまとめて変更できるグループコンポーネント\n */\nexport function ThemeSwitcherGroup({\n  className,\n  selectClassName = 'h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n  showThemeMode = true,\n  showColorTheme = true,\n  showSpacingTheme = true,\n  modeVariant = 'select',\n  colorVariant = 'select',\n  spacingVariant = 'select',\n}: ThemeSwitcherGroupProps) {\n  return (\n    <div className={cn(className, 'flex flex-col gap-3')}>\n      {showThemeMode && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Mode</span>\n          <ThemeModeSwitcher\n            className={modeVariant === 'select' ? selectClassName : undefined}\n            variant={modeVariant}\n          />\n        </div>\n      )}\n      {showColorTheme && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Color</span>\n          <ColorThemeSwitcher\n            className={colorVariant === 'select' ? selectClassName : undefined}\n            variant={colorVariant}\n          />\n        </div>\n      )}\n      {showSpacingTheme && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Density</span>\n          <SpacingThemeSwitcher\n            className={spacingVariant === 'select' ? selectClassName : undefined}\n            variant={spacingVariant}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-switcher.cjs","names":["useTheme","useIsClient","Sun","Moon","Monitor","Button","cn","Palette","Check","Rows4","Rows3","Rows2","require_ui_lib_utils","require_ui_components_ui_button_components","require_ui_components_theme_theme_context","require_ui_lib_hooks_use_is_client","react_jsx_runtime","lucide_react","ThemeModeSwitcher","isClient","modes","handleCycle","nextIndex","m","theme","setTheme","iconColorClass","withBackground","variant","isDark","resolvedTheme","className","activeTheme","selectValue","ColorThemeSwitcher","colors","activeColorTheme","colorTheme","c","setColorTheme","currentColor","SpacingThemeSwitcher","activeSpacingTheme","spacingTheme","spacings","s","setSpacingTheme","currentSpacing","IconComponent","ThemeSwitcherGroup","showThemeMode","modeVariant","selectClassName","showColorTheme","colorVariant","showSpacingTheme","spacingVariant"],"sources":["../../../../src/ui/components/theme/theme-switcher.tsx"],"sourcesContent":["import { Moon, Sun, Monitor, Check, Rows2, Rows3, Rows4, Palette } from 'lucide-react';\nimport { useTheme } from './theme-context';\nimport { Button } from '../ui/button';\nimport { cn } from \"../../lib/utils\";\nimport { useIsClient } from \"../../lib/hooks/use-is-client\";\n\n/**\n * Display settings shared by the theme switchers; see ThemeModeSwitcher for setup.\n *\n * @see ThemeModeSwitcher for the canonical usage example.\n */\nexport interface ThemeSwitcherProps {\n  /** Additional classes on the rendered control. */\n  className?: string;\n  /** Presentation style; defaults to 'select'. Both 'toggle' and 'cycle' cycle values. */\n  variant?: 'select' | 'toggle' | 'icon-group' | 'cycle';\n  /**\n   * Add a background to icon controls; defaults to false.\n   * Select controls ignore this setting.\n   */\n  withBackground?: boolean;\n}\n\n/**\n * Switches between light, dark and system modes from theme context.\n *\n * @param props - Control classes, presentation variant and optional icon background.\n *\n * @returns A select, cycling button or group of mode buttons.\n *\n * @remarks Use inside ThemeProvider and import @alneas/appkit-react/styles. Defaults to\n * select with no background; toggle/cycle advances light, dark, system. Before mount,\n * controls use stable system/light placeholders, then reflect the provider state.\n * The provider's storage setter may throw when browser storage is unavailable.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeProvider, ThemeModeSwitcher } from '@alneas/appkit-react/ui/theme';\n * export function ThemeControl() {\n *   return <ThemeProvider><ThemeModeSwitcher variant=\"toggle\" /></ThemeProvider>;\n * }\n * ```\n */\nexport function ThemeModeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n  const isClient = useIsClient();\n\n  const modes: Array<{\n    value: 'light' | 'dark' | 'system';\n    label: string;\n    icon: typeof Sun;\n  }> = [\n    { value: 'light', label: 'Light', icon: Sun },\n    { value: 'dark', label: 'Dark', icon: Moon },\n    { value: 'system', label: 'System', icon: Monitor },\n  ];\n\n  const handleCycle = () => {\n    const currentIndex = modes.findIndex((m) => m.value === theme);\n    const nextIndex = (currentIndex + 1) % modes.length;\n    setTheme(modes[nextIndex].value);\n  };\n\n  // Icon color: use explicit foreground when withBackground, otherwise inherit from parent\n  const iconColorClass = withBackground ? 'text-foreground' : '';\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    // SSR-safe: Use a consistent default for initial render\n    // After mount, use actual resolvedTheme\n    const isDark = isClient ? resolvedTheme === 'dark' : false;\n\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={cn(className, withBackground && 'bg-background/80 hover:bg-background')}\n        onClick={handleCycle}\n        title={isClient ? `Current theme: ${theme} (${resolvedTheme})` : 'Toggle theme'}\n      >\n        <div className='relative h-5 w-5 flex items-center justify-center'>\n          <Sun\n            className={cn(\n              'h-5 w-5 transition-all',\n              iconColorClass,\n              isDark ? 'rotate-90 scale-0 opacity-0' : 'rotate-0 scale-100 opacity-100',\n            )}\n          />\n          <Moon\n            className={cn(\n              'absolute h-5 w-5 transition-all',\n              iconColorClass,\n              isDark ? 'rotate-0 scale-100 opacity-100' : '-rotate-90 scale-0 opacity-0',\n            )}\n          />\n        </div>\n        <span className='sr-only'>Toggle theme</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    // SSR-safe: Use defaultTheme for initial render, actual theme after mount\n    const activeTheme = isClient ? theme : 'system';\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-1 border rounded-md p-1',\n          withBackground ? 'bg-background' : 'bg-transparent border-0',\n          className,\n        )}\n      >\n        {modes.map((m) => (\n          <Button\n            key={m.value}\n            variant={activeTheme === m.value ? 'secondary' : 'ghost'}\n            size='icon'\n            className='h-7 w-7'\n            onClick={() => setTheme(m.value)}\n            title={m.label}\n          >\n            <m.icon className='h-4 w-4' />\n            <span className='sr-only'>{m.label}</span>\n          </Button>\n        ))}\n      </div>\n    );\n  }\n\n  // SSR-safe: Use defaultTheme for initial render\n  const selectValue = isClient ? theme : 'system';\n  return (\n    <select\n      aria-label='Mode'\n      className={cn(\n        'h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n        className,\n      )}\n      value={selectValue}\n      onChange={(e) => setTheme(e.target.value as 'light' | 'dark' | 'system')}\n    >\n      <option value='light'>Light</option>\n      <option value='dark'>Dark</option>\n      <option value='system'>System</option>\n    </select>\n  );\n}\n\n/**\n * Switches the provider palette among default, blue, green, rose, orange and future.\n *\n * @param props - Control classes, variant (default select) and icon background (default false).\n *\n * @returns A palette select, cycling button or group of color buttons.\n *\n * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Toggle/cycle advances\n * through the available values. Custom palette names are not listed. An unknown current\n * palette displays Default in toggle/cycle, highlights no icon-group swatch and remains\n * an unmatched select value.\n * Provider localStorage setter errors propagate from interactions.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeProvider, ColorThemeSwitcher } from '@alneas/appkit-react/ui/theme';\n * export function Control() { return <ThemeProvider><ColorThemeSwitcher /></ThemeProvider>; }\n * ```\n */\nexport function ColorThemeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { colorTheme, setColorTheme } = useTheme();\n  const isClient = useIsClient();\n\n  const colors = [\n    { value: 'default', label: 'Default', color: 'bg-zinc-600' },\n    { value: 'blue', label: 'Blue', color: 'bg-blue-500' },\n    { value: 'green', label: 'Green', color: 'bg-green-500' },\n    { value: 'rose', label: 'Rose', color: 'bg-rose-500' },\n    { value: 'orange', label: 'Orange', color: 'bg-orange-500' },\n    { value: 'future', label: 'Future', color: 'bg-cyan-500' },\n  ];\n\n  // SSR-safe: Use default for initial render\n  const activeColorTheme = isClient ? colorTheme : 'default';\n\n  const handleCycle = () => {\n    const currentIndex = colors.findIndex((c) => c.value === colorTheme);\n    const nextIndex = (currentIndex + 1) % colors.length;\n    setColorTheme(colors[nextIndex].value);\n  };\n\n  const currentColor = colors.find((c) => c.value === activeColorTheme) || colors[0];\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    // withBackground: colored background, white inset ring, white icon\n    // no background: just colored palette icon\n    if (withBackground) {\n      return (\n        <Button\n          variant='ghost'\n          size='icon'\n          className={cn(\n            'ring-2 ring-inset ring-white/80 hover:ring-white',\n            currentColor.color,\n            'hover:opacity-90',\n            className,\n          )}\n          onClick={handleCycle}\n          title={`Color: ${currentColor.label} (Click to cycle)`}\n          aria-label={`Current color: ${currentColor.label}. Click to cycle.`}\n        >\n          <Palette className='h-5 w-5 text-white' />\n          <span className='sr-only'>{currentColor.label}</span>\n        </Button>\n      );\n    }\n\n    // No background: just colored icon\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={className}\n        onClick={handleCycle}\n        title={`Color: ${currentColor.label} (Click to cycle)`}\n        aria-label={`Current color: ${currentColor.label}. Click to cycle.`}\n      >\n        <Palette className={cn('h-5 w-5', currentColor.color.replace('bg-', 'text-'))} />\n        <span className='sr-only'>{currentColor.label}</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-2 flex-wrap',\n          withBackground ? 'bg-background p-1 rounded-md border' : '',\n          className,\n        )}\n      >\n        {colors.map((c) => (\n          <button\n            key={c.value}\n            className={cn(\n              'h-6 w-6 rounded-full border border-input ring-offset-background hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n              c.color,\n              activeColorTheme === c.value && 'ring-2 ring-ring ring-offset-2',\n            )}\n            onClick={() => setColorTheme(c.value)}\n            title={c.label}\n            aria-label={c.label}\n          >\n            {activeColorTheme === c.value && (\n              <Check className='h-3 w-3 text-white mx-auto' strokeWidth={3} />\n            )}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <select\n      aria-label='Color'\n      className={className}\n      value={activeColorTheme}\n      onChange={(e) => setColorTheme(e.target.value)}\n    >\n      {colors.map((c) => (\n        <option key={c.value} value={c.value}>\n          {c.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\n/**\n * Switches provider density among compact, normal and comfortable.\n *\n * @param props - Control classes, variant (default select) and icon background (default false).\n *\n * @returns A density select, cycling button or group of density buttons.\n *\n * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Toggle/cycle advances\n * through the available values. Before mount the displayed density is normal.\n * Provider localStorage setter errors propagate from interactions.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeProvider, SpacingThemeSwitcher } from '@alneas/appkit-react/ui/theme';\n * export function Control() { return <ThemeProvider><SpacingThemeSwitcher /></ThemeProvider>; }\n * ```\n */\nexport function SpacingThemeSwitcher({\n  className,\n  variant = 'select',\n  withBackground = false,\n}: ThemeSwitcherProps) {\n  const { spacingTheme, setSpacingTheme } = useTheme();\n  const isClient = useIsClient();\n\n  // SSR-safe: Use default for initial render\n  const activeSpacingTheme = isClient ? spacingTheme : 'normal';\n\n  const spacings: Array<{\n    value: 'compact' | 'normal' | 'comfortable';\n    label: string;\n    icon: typeof Rows2;\n  }> = [\n    { value: 'compact', label: 'Compact', icon: Rows4 }, // More rows = tighter spacing\n    { value: 'normal', label: 'Normal', icon: Rows3 }, // Medium\n    { value: 'comfortable', label: 'Comfortable', icon: Rows2 }, // Fewer rows = more spacing\n  ];\n\n  const handleCycle = () => {\n    const currentIndex = spacings.findIndex((s) => s.value === spacingTheme);\n    const nextIndex = (currentIndex + 1) % spacings.length;\n    setSpacingTheme(spacings[nextIndex].value);\n  };\n\n  // Icon color: use explicit foreground when withBackground, otherwise inherit from parent\n  const iconColorClass = withBackground ? 'text-foreground' : '';\n\n  if (variant === 'toggle' || variant === 'cycle') {\n    const currentSpacing = spacings.find((s) => s.value === activeSpacingTheme) || spacings[1];\n    const IconComponent = currentSpacing.icon;\n\n    return (\n      <Button\n        variant='ghost'\n        size='icon'\n        className={cn(className, withBackground && 'bg-background/80 hover:bg-background')}\n        onClick={handleCycle}\n        title={`Spacing: ${currentSpacing.label} (Click to cycle)`}\n        aria-label={`Current spacing: ${currentSpacing.label}. Click to cycle.`}\n      >\n        <IconComponent className={cn('h-5 w-5', iconColorClass)} />\n        <span className='sr-only'>{currentSpacing.label}</span>\n      </Button>\n    );\n  }\n\n  if (variant === 'icon-group') {\n    return (\n      <div\n        className={cn(\n          'flex items-center gap-1 border rounded-md p-1',\n          withBackground ? 'bg-background' : 'bg-transparent border-0',\n          className,\n        )}\n      >\n        {spacings.map((s) => (\n          <Button\n            key={s.value}\n            variant={activeSpacingTheme === s.value ? 'secondary' : 'ghost'}\n            size='icon'\n            className='h-7 w-7'\n            onClick={() => setSpacingTheme(s.value)}\n            title={s.label}\n          >\n            <s.icon className='h-4 w-4' />\n            <span className='sr-only'>{s.label}</span>\n          </Button>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <select\n      aria-label='Density'\n      className={className}\n      value={activeSpacingTheme}\n      onChange={(e) => setSpacingTheme(e.target.value as 'compact' | 'normal' | 'comfortable')}\n    >\n      <option value='compact'>Compact</option>\n      <option value='normal'>Normal</option>\n      <option value='comfortable'>Comfortable</option>\n    </select>\n  );\n}\n\n/**\n * Visibility and presentation for ThemeSwitcherGroup; see its usage example.\n * @see ThemeSwitcherGroup for the canonical usage example.\n */\nexport interface ThemeSwitcherGroupProps {\n  /** Classes on the outer group. */\n  className?: string;\n  /** Classes passed to select controls; defaults to the styled input classes. */\n  selectClassName?: string;\n  /** Show the mode control; defaults to true. */\n  showThemeMode?: boolean;\n  /** Show the palette control; defaults to true. */\n  showColorTheme?: boolean;\n  /** Show the density control; defaults to true. */\n  showSpacingTheme?: boolean;\n  /** Mode presentation; defaults to select. */\n  modeVariant?: 'select' | 'toggle' | 'icon-group';\n  /** Palette presentation; defaults to select. */\n  colorVariant?: 'select' | 'toggle' | 'icon-group';\n  /** Density presentation; defaults to select. */\n  spacingVariant?: 'select' | 'toggle' | 'icon-group';\n}\n\n/**\n * Groups optional mode, palette and density controls with visible labels.\n *\n * @param props - Group/select classes, visibility flags and per-control variants.\n *\n * @returns A vertical group; all three controls are visible as selects by default.\n *\n * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Each control persists\n * through the provider; browser storage errors can propagate from interactions.\n *\n * @example\n * ```tsx\n * import '@alneas/appkit-react/styles';\n * import { ThemeProvider, ThemeSwitcherGroup } from '@alneas/appkit-react/ui/theme';\n * export function ThemeSettings() { return <ThemeProvider><ThemeSwitcherGroup /></ThemeProvider>; }\n * ```\n */\nexport function ThemeSwitcherGroup({\n  className,\n  selectClassName = 'h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n  showThemeMode = true,\n  showColorTheme = true,\n  showSpacingTheme = true,\n  modeVariant = 'select',\n  colorVariant = 'select',\n  spacingVariant = 'select',\n}: ThemeSwitcherGroupProps) {\n  return (\n    <div className={cn(className, 'flex flex-col gap-3')}>\n      {showThemeMode && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Mode</span>\n          <ThemeModeSwitcher\n            className={modeVariant === 'select' ? selectClassName : undefined}\n            variant={modeVariant}\n          />\n        </div>\n      )}\n      {showColorTheme && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Color</span>\n          <ColorThemeSwitcher\n            className={colorVariant === 'select' ? selectClassName : undefined}\n            variant={colorVariant}\n          />\n        </div>\n      )}\n      {showSpacingTheme && (\n        <div className='flex items-center justify-between gap-2'>\n          <span className='text-xs text-muted-foreground'>Density</span>\n          <SpacingThemeSwitcher\n            className={spacingVariant === 'select' ? selectClassName : undefined}\n            variant={spacingVariant}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/components/theme/theme-switcher.d.cts

@@ -1,49 +1,118 @@
 /**
- * テーマスイッチャーのプロップス
+ * Display settings shared by the theme switchers; see ThemeModeSwitcher for setup.
+ *
+ * @see ThemeModeSwitcher for the canonical usage example.
  */
 export interface ThemeSwitcherProps {
-    /** 追加CSS */
+    /** Additional classes on the rendered control. */
     className?: string;
-    /** 表示形式 */
+    /** Presentation style; defaults to 'select'. Both 'toggle' and 'cycle' cycle values. */
     variant?: 'select' | 'toggle' | 'icon-group' | 'cycle';
     /**
-     * アイコンに背景を表示するか
-     * 暗い背景に配置する場合、trueにすると視認性が向上します
+     * Add a background to icon controls; defaults to false.
+     * Select controls ignore this setting.
      */
     withBackground?: boolean;
 }
 /**
- * テーマモードスイッチャー
+ * Switches between light, dark and system modes from theme context.
+ *
+ * @param props - Control classes, presentation variant and optional icon background.
  *
- * ライト/ダーク/システムを切り替えるUI。
+ * @returns A select, cycling button or group of mode buttons.
+ *
+ * @remarks Use inside ThemeProvider and import @alneas/appkit-react/styles. Defaults to
+ * select with no background; toggle/cycle advances light, dark, system. Before mount,
+ * controls use stable system/light placeholders, then reflect the provider state.
+ * The provider's storage setter may throw when browser storage is unavailable.
  *
  * @example
  * ```tsx
- * import { ThemeModeSwitcher } from "../../index.cjs";
- *
- * <ThemeModeSwitcher variant="toggle" />
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider, ThemeModeSwitcher } from '@alneas/appkit-react/ui/theme';
+ * export function ThemeControl() {
+ *   return <ThemeProvider><ThemeModeSwitcher variant="toggle" /></ThemeProvider>;
+ * }
  * ```
  */
 export declare function ThemeModeSwitcher({ className, variant, withBackground, }: ThemeSwitcherProps): import('react').JSX.Element;
 /**
- * カラーテーマ（プライマリ色）を切り替えるUIコンポーネント
+ * Switches the provider palette among default, blue, green, rose, orange and future.
+ *
+ * @param props - Control classes, variant (default select) and icon background (default false).
+ *
+ * @returns A palette select, cycling button or group of color buttons.
+ *
+ * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Toggle/cycle advances
+ * through the available values. Custom palette names are not listed. An unknown current
+ * palette displays Default in toggle/cycle, highlights no icon-group swatch and remains
+ * an unmatched select value.
+ * Provider localStorage setter errors propagate from interactions.
+ *
+ * @example
+ * ```tsx
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider, ColorThemeSwitcher } from '@alneas/appkit-react/ui/theme';
+ * export function Control() { return <ThemeProvider><ColorThemeSwitcher /></ThemeProvider>; }
+ * ```
  */
 export declare function ColorThemeSwitcher({ className, variant, withBackground, }: ThemeSwitcherProps): import('react').JSX.Element;
 /**
- * 表示の密度（余白など）をコンパクト、ノーマル、コンフォタブルに切り替えるUIコンポーネント
+ * Switches provider density among compact, normal and comfortable.
+ *
+ * @param props - Control classes, variant (default select) and icon background (default false).
+ *
+ * @returns A density select, cycling button or group of density buttons.
+ *
+ * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Toggle/cycle advances
+ * through the available values. Before mount the displayed density is normal.
+ * Provider localStorage setter errors propagate from interactions.
+ *
+ * @example
+ * ```tsx
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider, SpacingThemeSwitcher } from '@alneas/appkit-react/ui/theme';
+ * export function Control() { return <ThemeProvider><SpacingThemeSwitcher /></ThemeProvider>; }
+ * ```
  */
 export declare function SpacingThemeSwitcher({ className, variant, withBackground, }: ThemeSwitcherProps): import('react').JSX.Element;
+/**
+ * Visibility and presentation for ThemeSwitcherGroup; see its usage example.
+ * @see ThemeSwitcherGroup for the canonical usage example.
+ */
 export interface ThemeSwitcherGroupProps {
+    /** Classes on the outer group. */
     className?: string;
+    /** Classes passed to select controls; defaults to the styled input classes. */
     selectClassName?: string;
+    /** Show the mode control; defaults to true. */
     showThemeMode?: boolean;
+    /** Show the palette control; defaults to true. */
     showColorTheme?: boolean;
+    /** Show the density control; defaults to true. */
     showSpacingTheme?: boolean;
+    /** Mode presentation; defaults to select. */
     modeVariant?: 'select' | 'toggle' | 'icon-group';
+    /** Palette presentation; defaults to select. */
     colorVariant?: 'select' | 'toggle' | 'icon-group';
+    /** Density presentation; defaults to select. */
     spacingVariant?: 'select' | 'toggle' | 'icon-group';
 }
 /**
- * モード、カラー、表示密度の複数のテーマ設定をまとめて変更できるグループコンポーネント
+ * Groups optional mode, palette and density controls with visible labels.
+ *
+ * @param props - Group/select classes, visibility flags and per-control variants.
+ *
+ * @returns A vertical group; all three controls are visible as selects by default.
+ *
+ * @remarks Requires ThemeProvider and @alneas/appkit-react/styles. Each control persists
+ * through the provider; browser storage errors can propagate from interactions.
+ *
+ * @example
+ * ```tsx
+ * import '@alneas/appkit-react/styles';
+ * import { ThemeProvider, ThemeSwitcherGroup } from '@alneas/appkit-react/ui/theme';
+ * export function ThemeSettings() { return <ThemeProvider><ThemeSwitcherGroup /></ThemeProvider>; }
+ * ```
  */
 export declare function ThemeSwitcherGroup({ className, selectClassName, showThemeMode, showColorTheme, showSpacingTheme, modeVariant, colorVariant, spacingVariant, }: ThemeSwitcherGroupProps): import('react').JSX.Element;