@serendie/ui 2.5.0 → 2.5.1-dev.202602170627

package/dist/i18n/provider.d.ts

@@ -1,13 +1,38 @@
+import { ColorMode, ColorTheme } from '../theme/ThemeContext';
 export type Language = "ja" | "en";
 export declare const LanguageContext: import('react').Context<Language | undefined>;
+export interface SerendieProviderProps {
+    /** 言語設定 */
+    lang: Language;
+    /** カラーテーマ（デフォルト: 'konjo'） */
+    colorTheme?: ColorTheme;
+    /** カラーモード（デフォルト: undefined = ライトモード） */
+    colorMode?: ColorMode;
+    children: React.ReactNode;
+}
 /**
  * Serendie UIの設定を提供するProvider
  * アプリケーションのルートで使用してください
+ *
+ * @example
+ * ```tsx
+ * // 基本的な使い方（言語のみ）
+ * <SerendieProvider lang="ja">
+ *   <App />
+ * </SerendieProvider>
+ *
+ * // カラーモードを指定（OSの設定に従う）
+ * <SerendieProvider lang="ja" colorMode="system">
+ *   <App />
+ * </SerendieProvider>
+ *
+ * // カラーテーマとモードを指定
+ * <SerendieProvider lang="ja" colorTheme="asagi" colorMode="system">
+ *   <App />
+ * </SerendieProvider>
+ * ```
  */
-export declare function SerendieProvider({ lang, children, }: {
-    lang: Language;
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function SerendieProvider({ lang, colorTheme, colorMode, children, }: SerendieProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * @deprecated LanguageProvider は SerendieProvider にリネームされました
  */

package/dist/i18n/provider.js

@@ -1,15 +1,35 @@
-import { jsx as o } from "react/jsx-runtime";
-import { createContext as t } from "react";
-const n = t(void 0);
-function i({
-  lang: e,
-  children: r
+import { jsx as s } from "react/jsx-runtime";
+import { useMemo as m, useEffect as u, createContext as f } from "react";
+import { resolveTheme as c, ThemeContext as v } from "../theme/ThemeContext.js";
+import { useSystemColorScheme as h } from "../theme/useSystemColorScheme.js";
+const l = f(void 0);
+function p({
+  lang: d,
+  colorTheme: t = "konjo",
+  colorMode: o,
+  children: i
 }) {
-  return /* @__PURE__ */ o(n.Provider, { value: e, children: r });
+  const r = h() === "dark", e = m(() => c(t, o ?? "light", r), [t, o, r]);
+  u(() => {
+    if (typeof document > "u") return;
+    const n = document.documentElement;
+    return e ? n.dataset.pandaTheme = e : delete n.dataset.pandaTheme, () => {
+    };
+  }, [e]);
+  const a = m(
+    () => ({
+      colorTheme: t,
+      colorMode: o ?? "light",
+      resolvedTheme: e,
+      systemPrefersDark: r
+    }),
+    [t, o, e, r]
+  );
+  return /* @__PURE__ */ s(l.Provider, { value: d, children: /* @__PURE__ */ s(v.Provider, { value: a, children: i }) });
 }
-const u = i;
+const S = p;
 export {
-  n as LanguageContext,
-  u as LanguageProvider,
-  i as SerendieProvider
+  l as LanguageContext,
+  S as LanguageProvider,
+  p as SerendieProvider
 };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { SerendiePreset } from './preset';
+export { ThemeContext, useThemeContext, useSystemColorScheme, resolveTheme, getColorSchemeScript, ColorSchemeScript, type ColorMode, type ColorTheme, type ThemeContextValue, type ColorSchemeScriptOptions, } from './theme/index';
+export { SerendieProvider, LanguageProvider, useTranslations, getTranslations, formatDateByLang, type Language, type SerendieProviderProps, } from './i18n/index';
 export * from './components/Accordion/index.ts';
 export * from './components/Avatar/index.ts';
 export * from './components/Badge/index.ts';

package/dist/index.js

@@ -1,121 +1,137 @@
-import { SerendiePreset as e } from "./preset.js";
-import { Accordion as a } from "./components/Accordion/Accordion.js";
-import { AccordionGroup as m } from "./components/Accordion/AccordionGroup.js";
-import { Avatar as i, AvatarStyle as n } from "./components/Avatar/Avatar.js";
-import { Badge as s, BadgeCloseButton as c, BadgeStyle as d } from "./components/Badge/Badge.js";
-import { Banner as h } from "./components/Banner/Banner.js";
-import { BottomNavigation as S } from "./components/BottomNavigation/BottomNavigation.js";
-import { BottomNavigationItem as g, BottomNavigationItemStyle as y } from "./components/BottomNavigation/BottomNavigationItem.js";
-import { Button as I, ButtonStyle as T } from "./components/Button/Button.js";
-import { SerendieChartTheme as D } from "./components/Chart/SerendieChartTheme.js";
-import { compactChartMargin as k, defaultChartMargin as v, getChartColor as M, getChartColors as w, legendChartMargin as A, spaciousChartMargin as L, useBarChartProps as N, useChartProps as R, useLineChartProps as F, usePieChartProps as G } from "./components/Chart/SerendieChartProps.js";
-import { CheckBox as W, CheckBoxStyle as j, checkboxCheckedIconCss as q, checkboxIconCss as z, checkboxUncheckedIconCss as E } from "./components/CheckBox/CheckBox.js";
-import { ChoiceBox as J, ChoiceBoxStyle as K } from "./components/ChoiceBox/ChoiceBox.js";
-import { DashboardWidget as Q } from "./components/DashboardWidget/DashboardWidget.js";
-import { DataTable as X } from "./components/DataTable/index.js";
-import { DatePicker as Z } from "./components/DatePicker/DatePicker.js";
-import { Divider as $, DividerStyle as oo } from "./components/Divider/Divider.js";
-import { Drawer as eo } from "./components/Drawer/Drawer.js";
-import { DropdownMenu as ao, DropdownMenuStyle as po } from "./components/DropdownMenu/DropdownMenu.js";
-import { IconButton as xo, IconButtonStyle as io } from "./components/IconButton/IconButton.js";
-import { List as fo } from "./components/List/List.js";
-import { ListItem as co, ListItemStyle as lo } from "./components/List/ListItem.js";
-import { ModalDialog as Co } from "./components/ModalDialog/ModalDialog.js";
-import { NotificationBadge as Bo } from "./components/NotificationBadge/NotificationBadge.js";
-import { Pagination as yo, PaginationStyle as uo } from "./components/Pagination/Pagination.js";
-import { PasswordField as To } from "./components/PasswordField/PasswordField.js";
-import { ProgressIndicator as Do } from "./components/ProgressIndicator/ProgressIndicator.js";
-import { ProgressIndicatorIndeterminate as ko } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
-import { RadioButton as Mo, RadioButtonStyle as wo, radioCheckedIconCss as Ao, radioIconCss as Lo, radioUncheckedIconCss as No } from "./components/RadioButton/RadioButton.js";
-import { RadioGroup as Fo } from "./components/RadioButton/RadioGroup.js";
-import { Search as Uo, SearchStyle as Wo } from "./components/Search/Search.js";
-import { Select as qo, SelectStyle as zo } from "./components/Select/Select.js";
-import { Switch as Ho, SwitchStyle as Jo } from "./components/Switch/Switch.js";
-import { Tabs as Oo, TabsStyle as Qo } from "./components/Tabs/Tabs.js";
-import { TabItem as Xo, TabItemStyle as Yo } from "./components/Tabs/TabItem.js";
-import { TextArea as _o } from "./components/TextArea/TextArea.js";
-import { TextField as or } from "./components/TextField/TextField.js";
-import { Toast as er, ToastStyle as tr, toaster as ar } from "./components/Toast/Toast.js";
-import { Tooltip as mr } from "./components/Tooltip/Tooltip.js";
-import { TopAppBar as ir } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as fr } from "./components/DataTable/DataTableComponent.js";
-import { parse as cr } from "./node_modules/@zag-js/date-picker/dist/index.js";
+import { SerendiePreset as r } from "./preset.js";
+import { ThemeContext as a, resolveTheme as m, useThemeContext as p } from "./theme/ThemeContext.js";
+import { useSystemColorScheme as i } from "./theme/useSystemColorScheme.js";
+import { ColorSchemeScript as s, getColorSchemeScript as f } from "./theme/initColorScheme.js";
+import { formatDateByLang as l, getTranslations as d, useTranslations as h } from "./i18n/index.js";
+import { Accordion as C } from "./components/Accordion/Accordion.js";
+import { AccordionGroup as B } from "./components/Accordion/AccordionGroup.js";
+import { Avatar as y, AvatarStyle as T } from "./components/Avatar/Avatar.js";
+import { Badge as P, BadgeCloseButton as D, BadgeStyle as b } from "./components/Badge/Badge.js";
+import { Banner as v } from "./components/Banner/Banner.js";
+import { BottomNavigation as w } from "./components/BottomNavigation/BottomNavigation.js";
+import { BottomNavigationItem as L, BottomNavigationItemStyle as N } from "./components/BottomNavigation/BottomNavigationItem.js";
+import { Button as F, ButtonStyle as G } from "./components/Button/Button.js";
+import { SerendieChartTheme as W } from "./components/Chart/SerendieChartTheme.js";
+import { compactChartMargin as q, defaultChartMargin as z, getChartColor as E, getChartColors as H, legendChartMargin as J, spaciousChartMargin as K, useBarChartProps as O, useChartProps as Q, useLineChartProps as V, usePieChartProps as X } from "./components/Chart/SerendieChartProps.js";
+import { CheckBox as Z, CheckBoxStyle as _, checkboxCheckedIconCss as $, checkboxIconCss as oo, checkboxUncheckedIconCss as eo } from "./components/CheckBox/CheckBox.js";
+import { ChoiceBox as to, ChoiceBoxStyle as ao } from "./components/ChoiceBox/ChoiceBox.js";
+import { DashboardWidget as po } from "./components/DashboardWidget/DashboardWidget.js";
+import { DataTable as io } from "./components/DataTable/index.js";
+import { DatePicker as so } from "./components/DatePicker/DatePicker.js";
+import { Divider as co, DividerStyle as lo } from "./components/Divider/Divider.js";
+import { Drawer as So } from "./components/Drawer/Drawer.js";
+import { DropdownMenu as go, DropdownMenuStyle as Bo } from "./components/DropdownMenu/DropdownMenu.js";
+import { IconButton as yo, IconButtonStyle as To } from "./components/IconButton/IconButton.js";
+import { List as Po } from "./components/List/List.js";
+import { ListItem as bo, ListItemStyle as ko } from "./components/List/ListItem.js";
+import { ModalDialog as Mo } from "./components/ModalDialog/ModalDialog.js";
+import { NotificationBadge as Ao } from "./components/NotificationBadge/NotificationBadge.js";
+import { Pagination as No, PaginationStyle as Ro } from "./components/Pagination/Pagination.js";
+import { PasswordField as Go } from "./components/PasswordField/PasswordField.js";
+import { ProgressIndicator as Wo } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { ProgressIndicatorIndeterminate as qo } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
+import { RadioButton as Eo, RadioButtonStyle as Ho, radioCheckedIconCss as Jo, radioIconCss as Ko, radioUncheckedIconCss as Oo } from "./components/RadioButton/RadioButton.js";
+import { RadioGroup as Vo } from "./components/RadioButton/RadioGroup.js";
+import { Search as Yo, SearchStyle as Zo } from "./components/Search/Search.js";
+import { Select as $o, SelectStyle as oe } from "./components/Select/Select.js";
+import { Switch as re, SwitchStyle as te } from "./components/Switch/Switch.js";
+import { Tabs as me, TabsStyle as pe } from "./components/Tabs/Tabs.js";
+import { TabItem as ie, TabItemStyle as ne } from "./components/Tabs/TabItem.js";
+import { TextArea as fe } from "./components/TextArea/TextArea.js";
+import { TextField as le } from "./components/TextField/TextField.js";
+import { Toast as he, ToastStyle as Se, toaster as Ce } from "./components/Toast/Toast.js";
+import { Tooltip as Be } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as ye } from "./components/TopAppBar/TopAppBar.js";
+import { LanguageProvider as Ie, SerendieProvider as Pe } from "./i18n/provider.js";
+import { DataTableComponent as be } from "./components/DataTable/DataTableComponent.js";
+import { parse as ve } from "./node_modules/@zag-js/date-picker/dist/index.js";
 export {
-  a as Accordion,
-  m as AccordionGroup,
-  i as Avatar,
-  n as AvatarStyle,
-  s as Badge,
-  c as BadgeCloseButton,
-  d as BadgeStyle,
-  h as Banner,
-  S as BottomNavigation,
-  g as BottomNavigationItem,
-  y as BottomNavigationItemStyle,
-  I as Button,
-  T as ButtonStyle,
-  W as CheckBox,
-  j as CheckBoxStyle,
-  J as ChoiceBox,
-  K as ChoiceBoxStyle,
-  Q as DashboardWidget,
-  X as DataTable,
-  fr as DataTableComponent,
-  Z as DatePicker,
-  $ as Divider,
-  oo as DividerStyle,
-  eo as Drawer,
-  ao as DropdownMenu,
-  po as DropdownMenuStyle,
-  xo as IconButton,
-  io as IconButtonStyle,
-  fo as List,
-  co as ListItem,
-  lo as ListItemStyle,
-  Co as ModalDialog,
-  Bo as NotificationBadge,
-  yo as Pagination,
-  uo as PaginationStyle,
-  To as PasswordField,
-  Do as ProgressIndicator,
-  ko as ProgressIndicatorIndeterminate,
-  Mo as RadioButton,
-  wo as RadioButtonStyle,
-  Fo as RadioGroup,
-  Uo as Search,
-  Wo as SearchStyle,
-  qo as Select,
-  zo as SelectStyle,
-  D as SerendieChartTheme,
-  e as SerendiePreset,
-  Ho as Switch,
-  Jo as SwitchStyle,
-  Xo as TabItem,
-  Yo as TabItemStyle,
-  Oo as Tabs,
-  Qo as TabsStyle,
-  _o as TextArea,
-  or as TextField,
-  er as Toast,
-  tr as ToastStyle,
-  mr as Tooltip,
-  ir as TopAppBar,
-  q as checkboxCheckedIconCss,
-  z as checkboxIconCss,
-  E as checkboxUncheckedIconCss,
-  k as compactChartMargin,
-  v as defaultChartMargin,
-  M as getChartColor,
-  w as getChartColors,
-  A as legendChartMargin,
-  cr as parseDate,
-  Ao as radioCheckedIconCss,
-  Lo as radioIconCss,
-  No as radioUncheckedIconCss,
-  L as spaciousChartMargin,
-  ar as toaster,
-  N as useBarChartProps,
-  R as useChartProps,
-  F as useLineChartProps,
-  G as usePieChartProps
+  C as Accordion,
+  B as AccordionGroup,
+  y as Avatar,
+  T as AvatarStyle,
+  P as Badge,
+  D as BadgeCloseButton,
+  b as BadgeStyle,
+  v as Banner,
+  w as BottomNavigation,
+  L as BottomNavigationItem,
+  N as BottomNavigationItemStyle,
+  F as Button,
+  G as ButtonStyle,
+  Z as CheckBox,
+  _ as CheckBoxStyle,
+  to as ChoiceBox,
+  ao as ChoiceBoxStyle,
+  s as ColorSchemeScript,
+  po as DashboardWidget,
+  io as DataTable,
+  be as DataTableComponent,
+  so as DatePicker,
+  co as Divider,
+  lo as DividerStyle,
+  So as Drawer,
+  go as DropdownMenu,
+  Bo as DropdownMenuStyle,
+  yo as IconButton,
+  To as IconButtonStyle,
+  Ie as LanguageProvider,
+  Po as List,
+  bo as ListItem,
+  ko as ListItemStyle,
+  Mo as ModalDialog,
+  Ao as NotificationBadge,
+  No as Pagination,
+  Ro as PaginationStyle,
+  Go as PasswordField,
+  Wo as ProgressIndicator,
+  qo as ProgressIndicatorIndeterminate,
+  Eo as RadioButton,
+  Ho as RadioButtonStyle,
+  Vo as RadioGroup,
+  Yo as Search,
+  Zo as SearchStyle,
+  $o as Select,
+  oe as SelectStyle,
+  W as SerendieChartTheme,
+  r as SerendiePreset,
+  Pe as SerendieProvider,
+  re as Switch,
+  te as SwitchStyle,
+  ie as TabItem,
+  ne as TabItemStyle,
+  me as Tabs,
+  pe as TabsStyle,
+  fe as TextArea,
+  le as TextField,
+  a as ThemeContext,
+  he as Toast,
+  Se as ToastStyle,
+  Be as Tooltip,
+  ye as TopAppBar,
+  $ as checkboxCheckedIconCss,
+  oo as checkboxIconCss,
+  eo as checkboxUncheckedIconCss,
+  q as compactChartMargin,
+  z as defaultChartMargin,
+  l as formatDateByLang,
+  E as getChartColor,
+  H as getChartColors,
+  f as getColorSchemeScript,
+  d as getTranslations,
+  J as legendChartMargin,
+  ve as parseDate,
+  Jo as radioCheckedIconCss,
+  Ko as radioIconCss,
+  Oo as radioUncheckedIconCss,
+  m as resolveTheme,
+  K as spaciousChartMargin,
+  Ce as toaster,
+  O as useBarChartProps,
+  Q as useChartProps,
+  V as useLineChartProps,
+  X as usePieChartProps,
+  i as useSystemColorScheme,
+  p as useThemeContext,
+  h as useTranslations
 };