@omnifyjp/ui 2.0.4 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnifyjp/ui",
-  "version": "2.0.4",
+  "version": "2.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -35,14 +35,6 @@
     "dist",
     "src/styles"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint src/",
-    "type-check": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "peerDependencies": {
     "date-fns": ">=3",
     "react": ">=19",
@@ -99,7 +91,7 @@
     "sonner": "2.0.3",
     "tailwind-merge": "3.2.0",
     "vaul": "1.1.2",
-    "@omnifyjp/ui-mcp": "2.0.4"
+    "@omnifyjp/ui-mcp": "2.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -111,5 +103,13 @@
     "tsup": "^8.0.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}

package/dist/chunk-VPTIRPZW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/providers/ui-provider.tsx"],"names":[],"mappings":"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","file":"chunk-VPTIRPZW.js","sourcesContent":["import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';\n\n// ─── Theme ────────────────────────────────────────────────────────────────────\n\nexport type Theme = 'light' | 'dark' | 'system';\n\n// ─── Locale ───────────────────────────────────────────────────────────────────\n\nexport type LocaleCode = string;\n\n/**\n * Map of locale code → display label.\n * @example { en: 'English', vi: 'Tiếng Việt', ja: '日本語' }\n */\nexport type LocaleMap = Record<LocaleCode, string>;\n\n/** Value shape for translatable fields: locale code → string content. */\nexport type TranslatableValue = Record<LocaleCode, string>;\n\n/** Locale configuration used by UIProvider and translatable fields. */\nexport interface UILocaleConfig {\n  /** Available locales. e.g. `{ en: 'English', vi: 'Tiếng Việt' }` */\n  locales: LocaleMap;\n  /** Locale shown by default when a translatable field is first rendered. */\n  defaultLocale: LocaleCode;\n  /** Locale to fall back to when the active locale has no value. */\n  fallbackLocale: LocaleCode;\n}\n\n/**\n * `true`  — inherit UIProvider's locale config.\n * `object` — override per-field (merged with provider config).\n */\nexport type TranslatableConfig = true | Partial<UILocaleConfig>;\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\ninterface UIContextValue {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  locale: UILocaleConfig | undefined;\n  dateFnsLocale: object | undefined;\n}\n\nconst UIContext = createContext<UIContextValue | undefined>(undefined);\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction loadSavedTheme(): Theme {\n  if (typeof window === 'undefined') return 'system';\n  const saved = localStorage.getItem('omnify_theme');\n  if (saved === 'light' || saved === 'dark' || saved === 'system') return saved;\n  return 'system';\n}\n\nfunction applyTheme(theme: Theme) {\n  const root = document.documentElement;\n  if (theme === 'system') {\n    root.classList.toggle('dark', window.matchMedia('(prefers-color-scheme: dark)').matches);\n  } else {\n    root.classList.toggle('dark', theme === 'dark');\n  }\n}\n\n// ─── UIProvider ───────────────────────────────────────────────────────────────\n\nexport interface UIProviderProps {\n  children: ReactNode;\n  /**\n   * Initial theme. Defaults to user's saved localStorage value or `'system'`.\n   */\n  defaultTheme?: Theme;\n  /**\n   * Available locales for translatable fields.\n   * @example { en: 'English', vi: 'Tiếng Việt', ja: '日本語' }\n   */\n  locales?: LocaleMap;\n  /**\n   * Locale shown first in translatable fields.\n   * Defaults to the first key in `locales`.\n   */\n  defaultLocale?: LocaleCode;\n  /**\n   * Locale used when a field has no value for the active locale.\n   * Defaults to `defaultLocale`.\n   */\n  fallbackLocale?: LocaleCode;\n  /**\n   * date-fns `Locale` object used by date components (DatePicker, CalendarMini, etc.).\n   * Typed as `object` to avoid importing date-fns as a direct dependency.\n   *\n   * @example\n   * ```tsx\n   * import { ja } from 'date-fns/locale';\n   * <UIProvider dateFnsLocale={ja}>{children}</UIProvider>\n   * ```\n   */\n  dateFnsLocale?: object;\n}\n\n/**\n * Root provider for @omnifyjp/ui — handles dark mode and translatable field config.\n *\n * @example\n * ```tsx\n * <UIProvider\n *   locales={{ en: 'English', vi: 'Tiếng Việt', ja: '日本語' }}\n *   defaultLocale=\"en\"\n *   fallbackLocale=\"en\"\n * >\n *   {children}\n * </UIProvider>\n * ```\n */\nexport function UIProvider({\n  children,\n  defaultTheme,\n  locales,\n  defaultLocale,\n  fallbackLocale,\n  dateFnsLocale,\n}: UIProviderProps) {\n  const [theme, setThemeState] = useState<Theme>(() => defaultTheme ?? loadSavedTheme());\n\n  const setTheme = useCallback((t: Theme) => setThemeState(t), []);\n\n  useEffect(() => {\n    localStorage.setItem('omnify_theme', theme);\n    applyTheme(theme);\n  }, [theme]);\n\n  useEffect(() => {\n    if (theme !== 'system') return;\n    const mq = window.matchMedia('(prefers-color-scheme: dark)');\n    const handler = () => applyTheme('system');\n    mq.addEventListener('change', handler);\n    return () => mq.removeEventListener('change', handler);\n  }, [theme]);\n\n  const firstLocale = locales ? Object.keys(locales)[0] : undefined;\n  const locale: UILocaleConfig | undefined =\n    locales && firstLocale\n      ? {\n          locales,\n          defaultLocale: defaultLocale ?? firstLocale,\n          fallbackLocale: fallbackLocale ?? defaultLocale ?? firstLocale,\n        }\n      : undefined;\n\n  return (\n    <UIContext.Provider value={{ theme, setTheme, locale, dateFnsLocale }}>\n      {children}\n    </UIContext.Provider>\n  );\n}\n\n// ─── Hooks ────────────────────────────────────────────────────────────────────\n\n/** Access theme and setTheme. Must be inside UIProvider. */\nexport function useTheme(): { theme: Theme; setTheme: (t: Theme) => void } {\n  const ctx = useContext(UIContext);\n  if (!ctx) throw new Error('useTheme must be used within UIProvider');\n  return { theme: ctx.theme, setTheme: ctx.setTheme };\n}\n\n/**\n * Returns the locale config from UIProvider.\n * Returns `undefined` when no `locales` prop was passed to UIProvider.\n */\nexport function useUILocales(): UILocaleConfig | undefined {\n  return useContext(UIContext)?.locale;\n}\n\n/**\n * Returns the date-fns `Locale` object from UIProvider.\n * Returns `undefined` when no `dateFnsLocale` prop was passed.\n */\nexport function useDateFnsLocale(): object | undefined {\n  return useContext(UIContext)?.dateFnsLocale;\n}\n\n/**\n * Resolves the effective UILocaleConfig for a translatable field.\n * Merges inline `TranslatableConfig` with the provider's locale config.\n */\nexport function resolveTranslatableConfig(\n  translatable: TranslatableConfig,\n  providerLocales: UILocaleConfig | undefined,\n): UILocaleConfig | undefined {\n  if (translatable === true) {\n    return providerLocales;\n  }\n  const base = providerLocales ?? { locales: {}, defaultLocale: '', fallbackLocale: '' };\n  const merged: UILocaleConfig = {\n    locales: translatable.locales ?? base.locales,\n    defaultLocale: translatable.defaultLocale ?? base.defaultLocale,\n    fallbackLocale: translatable.fallbackLocale ?? base.fallbackLocale,\n  };\n  return Object.keys(merged.locales).length > 0 ? merged : undefined;\n}\n"]}