@serendie/ui 2.5.0 → 2.5.1-dev.202602170627

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/README.md +63 -8
  2. package/dist/client.js +135 -119
  3. package/dist/components/Avatar/Avatar.js +3 -3
  4. package/dist/components/Badge/Badge.d.ts +6 -6
  5. package/dist/components/Badge/Badge.js +21 -21
  6. package/dist/components/Banner/Banner.d.ts +1 -4
  7. package/dist/components/Banner/Banner.js +8 -11
  8. package/dist/components/Button/Button.d.ts +0 -2
  9. package/dist/components/Button/Button.js +10 -11
  10. package/dist/components/CheckBox/CheckBox.js +4 -4
  11. package/dist/components/DatePicker/styles.js +1 -1
  12. package/dist/components/Divider/Divider.d.ts +2 -2
  13. package/dist/components/Divider/Divider.js +11 -11
  14. package/dist/components/Drawer/Drawer.js +3 -3
  15. package/dist/components/DropdownMenu/DropdownMenu.js +5 -5
  16. package/dist/components/IconButton/IconButton.d.ts +0 -1
  17. package/dist/components/IconButton/IconButton.js +0 -1
  18. package/dist/components/ModalDialog/ModalDialog.js +1 -1
  19. package/dist/components/ProgressIndicator/ProgressIndicator.js +9 -9
  20. package/dist/components/Search/Search.js +5 -5
  21. package/dist/components/Select/Select.js +14 -14
  22. package/dist/components/Switch/Switch.js +5 -5
  23. package/dist/components/TextField/TextField.js +52 -48
  24. package/dist/components/Toast/Toast.d.ts +3 -5
  25. package/dist/components/Toast/Toast.js +8 -10
  26. package/dist/i18n/index.d.ts +1 -1
  27. package/dist/i18n/provider.d.ts +29 -4
  28. package/dist/i18n/provider.js +31 -11
  29. package/dist/index.d.ts +2 -0
  30. package/dist/index.js +135 -119
  31. package/dist/node_modules/@serendie/design-token/dist/panda-tokens.js +310 -0
  32. package/dist/node_modules/@serendie/design-token/dist/tokens.js +126 -0
  33. package/dist/preset.d.ts +0 -930
  34. package/dist/styled-system/css/conditions.js +1 -1
  35. package/dist/styled-system/jsx/is-valid-prop.js +1 -1
  36. package/dist/styles.css +1 -1
  37. package/dist/theme/ThemeContext.d.ts +55 -0
  38. package/dist/theme/ThemeContext.js +15 -0
  39. package/dist/theme/index.d.ts +3 -0
  40. package/dist/theme/index.js +11 -0
  41. package/dist/theme/initColorScheme.d.ts +74 -0
  42. package/dist/theme/initColorScheme.js +32 -0
  43. package/dist/theme/useSystemColorScheme.d.ts +15 -0
  44. package/dist/theme/useSystemColorScheme.js +19 -0
  45. package/dist/tokens/getToken.d.ts +0 -378
  46. package/dist/tokens/index.d.ts +0 -930
  47. package/package.json +2 -2
  48. package/styled-system/css/conditions.js +1 -1
  49. package/styled-system/jsx/is-valid-prop.js +1 -1
  50. package/styled-system/themes/index.d.ts +6 -1
  51. package/styled-system/themes/theme-konjo-dark.json +5 -0
  52. package/styled-system/types/conditions.d.ts +2 -0
package/dist/theme/ThemeContext.d.ts ADDED
@@ -0,0 +1,55 @@
1
+ /**
2
+ * カラーモード
3
+ * - 'system': OSの設定に従う
4
+ * - 'light': ライトモード固定
5
+ * - 'dark': ダークモード固定
6
+ */
7
+ export type ColorMode = "system" | "light" | "dark";
8
+ /**
9
+ * カラーテーマ
10
+ * Serendie UIで利用可能なカラーテーマ
11
+ */
12
+ export type ColorTheme = "konjo" | "asagi" | "sumire" | "tsutsuji" | "kurikawa";
13
+ export interface ThemeContextValue {
14
+ /** 現在のカラーテーマ */
15
+ colorTheme: ColorTheme;
16
+ /** 現在のカラーモード設定 */
17
+ colorMode: ColorMode;
18
+ /** 解決後のテーマ名（data-panda-themeに設定される値） */
19
+ resolvedTheme: string;
20
+ /** システムが現在ダークモードかどうか */
21
+ systemPrefersDark: boolean;
22
+ }
23
+ export declare const ThemeContext: import('react').Context<ThemeContextValue | undefined>;
24
+ /**
25
+ * テーマコンテキストを取得するフック
26
+ *
27
+ * @returns ThemeContextValue | undefined
28
+ *
29
+ * @example
30
+ * ```tsx
31
+ * function Component() {
32
+ * const theme = useThemeContext();
33
+ * if (theme) {
34
+ * console.log(theme.resolvedTheme); // 'konjo' or 'konjo-dark' etc.
35
+ * }
36
+ * }
37
+ * ```
38
+ */
39
+ export declare function useThemeContext(): ThemeContextValue | undefined;
40
+ /**
41
+ * テーマ名を解決する
42
+ *
43
+ * @param colorTheme - カラーテーマ（konjo, asagi等）
44
+ * @param colorMode - カラーモード（system, light, dark）
45
+ * @param systemPrefersDark - システムがダークモードかどうか
46
+ * @returns 解決後のテーマ名（data-panda-themeに設定する値）
47
+ *
48
+ * @example
49
+ * ```ts
50
+ * resolveTheme('konjo', 'system', true); // 'konjo-dark'
51
+ * resolveTheme('konjo', 'light', true); // 'konjo'
52
+ * resolveTheme('asagi', 'dark', false); // 'konjo-dark' (asagi-darkは未実装のためフォールバック)
53
+ * ```
54
+ */
55
+ export declare function resolveTheme(colorTheme: ColorTheme, colorMode: ColorMode, systemPrefersDark: boolean): string;
package/dist/theme/ThemeContext.js ADDED
@@ -0,0 +1,15 @@
1
+ import { createContext as r, useContext as o } from "react";
2
+ const s = r(
3
+ void 0
4
+ );
5
+ function k() {
6
+ return o(s);
7
+ }
8
+ function a(t, e, n) {
9
+ return e === "dark" || e === "system" && n ? "konjo-dark" : t === "konjo" ? "" : t;
10
+ }
11
+ export {
12
+ s as ThemeContext,
13
+ a as resolveTheme,
14
+ k as useThemeContext
15
+ };
package/dist/theme/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { ThemeContext, useThemeContext, resolveTheme, type ColorMode, type ColorTheme, type ThemeContextValue, } from './ThemeContext';
2
+ export { useSystemColorScheme } from './useSystemColorScheme';
3
+ export { getColorSchemeScript, ColorSchemeScript, type ColorSchemeScriptOptions, } from './initColorScheme';
package/dist/theme/index.js ADDED
@@ -0,0 +1,11 @@
1
+ import { ThemeContext as r, resolveTheme as t, useThemeContext as m } from "./ThemeContext.js";
2
+ import { useSystemColorScheme as S } from "./useSystemColorScheme.js";
3
+ import { ColorSchemeScript as p, getColorSchemeScript as x } from "./initColorScheme.js";
4
+ export {
5
+ p as ColorSchemeScript,
6
+ r as ThemeContext,
7
+ x as getColorSchemeScript,
8
+ t as resolveTheme,
9
+ S as useSystemColorScheme,
10
+ m as useThemeContext
11
+ };
package/dist/theme/initColorScheme.d.ts ADDED
@@ -0,0 +1,74 @@
1
+ import { ColorTheme, ColorMode } from './ThemeContext';
2
+ export interface ColorSchemeScriptOptions {
3
+ /** カラーテーマを直接指定（localStorageより優先） */
4
+ colorTheme?: ColorTheme;
5
+ /** カラーモードを直接指定（localStorageより優先） */
6
+ colorMode?: ColorMode;
7
+ /** デフォルトのカラーテーマ（デフォルト: 'konjo'）。colorTheme未指定かつlocalStorageに値がない場合に使用 */
8
+ defaultTheme?: ColorTheme;
9
+ /** デフォルトのカラーモード（デフォルト: 'light'）。colorMode未指定かつlocalStorageに値がない場合に使用 */
10
+ defaultColorMode?: ColorMode;
11
+ /** localStorageのキー（テーマ）（デフォルト: 'serendie-color-theme'） */
12
+ themeStorageKey?: string;
13
+ /** localStorageのキー（モード）（デフォルト: 'serendie-color-mode'） */
14
+ modeStorageKey?: string;
15
+ }
16
+ /**
17
+ * FOUC（Flash of Unstyled Content）を防ぐためのインラインスクリプトを生成する
18
+ *
19
+ * このスクリプトはHTMLの<head>内にインラインで埋め込むことで、
20
+ * ページ読み込み時に正しいテーマが即座に適用されるようにします。
21
+ *
22
+ * @param options - スクリプト生成オプション
23
+ * @returns インラインスクリプトの文字列
24
+ *
25
+ * @example
26
+ * ```tsx
27
+ * // Next.js App Routerでの使用例
28
+ * // 推奨: ColorSchemeScriptコンポーネントを使用してください
29
+ * import { getColorSchemeScript } from '@serendie/ui';
30
+ *
31
+ * export default function RootLayout({ children }) {
32
+ * return (
33
+ * <html suppressHydrationWarning>
34
+ * <head>
35
+ * <script
36
+ * dangerouslySetInnerHTML={{
37
+ * __html: getColorSchemeScript({ colorTheme: 'konjo', colorMode: 'system' })
38
+ * }}
39
+ * />
40
+ * </head>
41
+ * <body>{children}</body>
42
+ * </html>
43
+ * );
44
+ * }
45
+ * ```
46
+ */
47
+ export declare function getColorSchemeScript(options?: ColorSchemeScriptOptions): string;
48
+ /**
49
+ * FOUC防止用のReactコンポーネント
50
+ * Next.jsのApp Routerで使用する場合のヘルパー
51
+ *
52
+ * SerendieProviderの内側で使用する場合、propsを省略するとContextから
53
+ * テーマ設定を自動的に取得します。
54
+ *
55
+ * @example
56
+ * ```tsx
57
+ * // layout.tsx（推奨: SerendieProviderの内側で使用）
58
+ * import { ColorSchemeScript, SerendieProvider } from '@serendie/ui';
59
+ *
60
+ * export default function RootLayout({ children }) {
61
+ * return (
62
+ * <SerendieProvider lang="ja" colorTheme="konjo" colorMode="system">
63
+ * <html suppressHydrationWarning>
64
+ * <head>
65
+ * <ColorSchemeScript />
66
+ * </head>
67
+ * <body>{children}</body>
68
+ * </html>
69
+ * </SerendieProvider>
70
+ * );
71
+ * }
72
+ * ```
73
+ */
74
+ export declare function ColorSchemeScript(props?: ColorSchemeScriptOptions): import("react/jsx-runtime").JSX.Element;
package/dist/theme/initColorScheme.js ADDED
@@ -0,0 +1,32 @@
1
+ import { jsx as d } from "react/jsx-runtime";
2
+ import { useThemeContext as n } from "./ThemeContext.js";
3
+ function l(o = {}) {
4
+ const {
5
+ colorTheme: e,
6
+ colorMode: t,
7
+ defaultTheme: r = "konjo",
8
+ defaultColorMode: m = "light",
9
+ themeStorageKey: a = "serendie-color-theme",
10
+ modeStorageKey: c = "serendie-color-mode"
11
+ } = o;
12
+ return e !== void 0 || t !== void 0 ? `(function(){try{var t='${e ?? r}';var m='${t ?? m}';var d=window.matchMedia('(prefers-color-scheme:dark)').matches;var k=m==='dark'||(m==='system'&&d);if(k){document.documentElement.dataset.pandaTheme='konjo-dark'}else if(t!=='konjo'){document.documentElement.dataset.pandaTheme=t}}catch(e){}})();` : `(function(){try{var t=localStorage.getItem('${a}')||'${r}';var m=localStorage.getItem('${c}')||'${m}';var d=window.matchMedia('(prefers-color-scheme:dark)').matches;var k=m==='dark'||(m==='system'&&d);if(k){document.documentElement.dataset.pandaTheme='konjo-dark'}else if(t!=='konjo'){document.documentElement.dataset.pandaTheme=t}}catch(e){}})();`;
13
+ }
14
+ function f(o = {}) {
15
+ const e = n(), t = o.colorTheme ?? (e == null ? void 0 : e.colorTheme), r = o.colorMode ?? (e == null ? void 0 : e.colorMode);
16
+ return /* @__PURE__ */ d(
17
+ "script",
18
+ {
19
+ dangerouslySetInnerHTML: {
20
+ __html: l({
21
+ ...o,
22
+ colorTheme: t,
23
+ colorMode: r
24
+ })
25
+ }
26
+ }
27
+ );
28
+ }
29
+ export {
30
+ f as ColorSchemeScript,
31
+ l as getColorSchemeScript
32
+ };
package/dist/theme/useSystemColorScheme.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * OSのカラースキーム設定を検出するフック
3
+ * prefers-color-schemeメディアクエリを監視し、変更を検知する
4
+ *
5
+ * @returns 'light' | 'dark' - 現在のシステムカラースキーム
6
+ *
7
+ * @example
8
+ * ```tsx
9
+ * function Component() {
10
+ * const systemScheme = useSystemColorScheme();
11
+ * // systemScheme は 'light' または 'dark'
12
+ * }
13
+ * ```
14
+ */
15
+ export declare function useSystemColorScheme(): "light" | "dark";
package/dist/theme/useSystemColorScheme.js ADDED
@@ -0,0 +1,19 @@
1
+ import { useSyncExternalStore as t } from "react";
2
+ function n() {
3
+ return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
4
+ }
5
+ function o(e) {
6
+ const r = window.matchMedia("(prefers-color-scheme: dark)");
7
+ return r.addEventListener("change", e), () => r.removeEventListener("change", e);
8
+ }
9
+ function c() {
10
+ return t(
11
+ o,
12
+ n,
13
+ () => "light"
14
+ // サーバー側のスナップショット
15
+ );
16
+ }
17
+ export {
18
+ c as useSystemColorScheme
19
+ };
package/dist/tokens/getToken.d.ts CHANGED
@@ -774,383 +774,5 @@ export declare function getToken(): {
774
774
  };
775
775
  };
776
776
  };
777
- kurikawa: {
778
- tokens: {
779
- colors: {
780
- sd: {
781
- system: {
782
- color: {
783
- impression: {
784
- primary: string;
785
- onPrimary: string;
786
- primaryContainer: string;
787
- onPrimaryContainer: string;
788
- secondary: string;
789
- onSecondary: string;
790
- secondaryContainer: string;
791
- onSecondaryContainer: string;
792
- tertiary: string;
793
- onTertiary: string;
794
- tertiaryContainer: string;
795
- onTertiaryContainer: string;
796
- notice: string;
797
- onNotice: string;
798
- noticeContainer: string;
799
- onNoticeContainer: string;
800
- noticeContainerVariant: string;
801
- onNoticeContainerVariant: string;
802
- negative: string;
803
- onNegative: string;
804
- negativeContainer: string;
805
- onNegativeContainer: string;
806
- negativeContainerVariant: string;
807
- onNegativeContainerVariant: string;
808
- positive: string;
809
- onPositive: string;
810
- positiveContainer: string;
811
- onPositiveContainer: string;
812
- positiveContainerVariant: string;
813
- onPositiveContainerVariant: string;
814
- };
815
- component: {
816
- surface: string;
817
- onSurface: string;
818
- onSurfaceVariant: string;
819
- inverseSurface: string;
820
- inverseOnSurface: string;
821
- inversePrimary: string;
822
- outlineBright: string;
823
- outline: string;
824
- outlineDim: string;
825
- scrim: string;
826
- surfaceDim: string;
827
- surfaceBright: string;
828
- surfaceContainerBright: string;
829
- surfaceContainer: string;
830
- surfaceContainerDim: string;
831
- };
832
- interaction: {
833
- disabled: string;
834
- disabledOnSurface: string;
835
- selected: string;
836
- selectedSurface: string;
837
- hovered: string;
838
- hoveredVariant: string;
839
- hoveredOnPrimary: string;
840
- };
841
- chart: {
842
- mark: {
843
- primary: {
844
- "01": string;
845
- "02": string;
846
- "03": string;
847
- "04": string;
848
- "05": string;
849
- "06": string;
850
- };
851
- positive: {
852
- "01": string;
853
- "02": string;
854
- "03": string;
855
- "04": string;
856
- "05": string;
857
- "06": string;
858
- };
859
- negative: {
860
- "01": string;
861
- "02": string;
862
- "03": string;
863
- "04": string;
864
- "05": string;
865
- "06": string;
866
- };
867
- notice: {
868
- "01": string;
869
- "02": string;
870
- "03": string;
871
- "04": string;
872
- "05": string;
873
- "06": string;
874
- };
875
- multi: {
876
- 10: string;
877
- "01": string;
878
- "02": string;
879
- "03": string;
880
- "04": string;
881
- "05": string;
882
- "06": string;
883
- "07": string;
884
- "08": string;
885
- "09": string;
886
- };
887
- };
888
- component: {
889
- onMarkLabel: string;
890
- inverseOnMarkLabel: string;
891
- scalemark: string;
892
- threshold: string;
893
- chartSurface: string;
894
- onChartSurface: string;
895
- };
896
- };
897
- };
898
- };
899
- };
900
- };
901
- };
902
- };
903
- sumire: {
904
- tokens: {
905
- colors: {
906
- sd: {
907
- system: {
908
- color: {
909
- impression: {
910
- primary: string;
911
- onPrimary: string;
912
- primaryContainer: string;
913
- onPrimaryContainer: string;
914
- secondary: string;
915
- onSecondary: string;
916
- secondaryContainer: string;
917
- onSecondaryContainer: string;
918
- tertiary: string;
919
- onTertiary: string;
920
- tertiaryContainer: string;
921
- onTertiaryContainer: string;
922
- notice: string;
923
- onNotice: string;
924
- noticeContainer: string;
925
- onNoticeContainer: string;
926
- noticeContainerVariant: string;
927
- onNoticeContainerVariant: string;
928
- negative: string;
929
- onNegative: string;
930
- negativeContainer: string;
931
- onNegativeContainer: string;
932
- negativeContainerVariant: string;
933
- onNegativeContainerVariant: string;
934
- positive: string;
935
- onPositive: string;
936
- positiveContainer: string;
937
- onPositiveContainer: string;
938
- positiveContainerVariant: string;
939
- onPositiveContainerVariant: string;
940
- };
941
- component: {
942
- surface: string;
943
- onSurface: string;
944
- onSurfaceVariant: string;
945
- inverseSurface: string;
946
- inverseOnSurface: string;
947
- inversePrimary: string;
948
- outlineBright: string;
949
- outline: string;
950
- outlineDim: string;
951
- scrim: string;
952
- surfaceDim: string;
953
- surfaceBright: string;
954
- surfaceContainerBright: string;
955
- surfaceContainer: string;
956
- surfaceContainerDim: string;
957
- };
958
- interaction: {
959
- disabled: string;
960
- disabledOnSurface: string;
961
- selected: string;
962
- selectedSurface: string;
963
- hovered: string;
964
- hoveredVariant: string;
965
- hoveredOnPrimary: string;
966
- };
967
- chart: {
968
- mark: {
969
- primary: {
970
- "01": string;
971
- "02": string;
972
- "03": string;
973
- "04": string;
974
- "05": string;
975
- "06": string;
976
- };
977
- positive: {
978
- "01": string;
979
- "02": string;
980
- "03": string;
981
- "04": string;
982
- "05": string;
983
- "06": string;
984
- };
985
- negative: {
986
- "01": string;
987
- "02": string;
988
- "03": string;
989
- "04": string;
990
- "05": string;
991
- "06": string;
992
- };
993
- notice: {
994
- "01": string;
995
- "02": string;
996
- "03": string;
997
- "04": string;
998
- "05": string;
999
- "06": string;
1000
- };
1001
- multi: {
1002
- 10: string;
1003
- "01": string;
1004
- "02": string;
1005
- "03": string;
1006
- "04": string;
1007
- "05": string;
1008
- "06": string;
1009
- "07": string;
1010
- "08": string;
1011
- "09": string;
1012
- };
1013
- };
1014
- component: {
1015
- onMarkLabel: string;
1016
- inverseOnMarkLabel: string;
1017
- scalemark: string;
1018
- threshold: string;
1019
- chartSurface: string;
1020
- onChartSurface: string;
1021
- };
1022
- };
1023
- };
1024
- };
1025
- };
1026
- };
1027
- };
1028
- };
1029
- tsutsuji: {
1030
- tokens: {
1031
- colors: {
1032
- sd: {
1033
- system: {
1034
- color: {
1035
- impression: {
1036
- primary: string;
1037
- onPrimary: string;
1038
- primaryContainer: string;
1039
- onPrimaryContainer: string;
1040
- secondary: string;
1041
- onSecondary: string;
1042
- secondaryContainer: string;
1043
- onSecondaryContainer: string;
1044
- tertiary: string;
1045
- onTertiary: string;
1046
- tertiaryContainer: string;
1047
- onTertiaryContainer: string;
1048
- notice: string;
1049
- onNotice: string;
1050
- noticeContainer: string;
1051
- onNoticeContainer: string;
1052
- noticeContainerVariant: string;
1053
- onNoticeContainerVariant: string;
1054
- negative: string;
1055
- onNegative: string;
1056
- negativeContainer: string;
1057
- onNegativeContainer: string;
1058
- negativeContainerVariant: string;
1059
- onNegativeContainerVariant: string;
1060
- positive: string;
1061
- onPositive: string;
1062
- positiveContainer: string;
1063
- onPositiveContainer: string;
1064
- positiveContainerVariant: string;
1065
- onPositiveContainerVariant: string;
1066
- };
1067
- component: {
1068
- surface: string;
1069
- onSurface: string;
1070
- onSurfaceVariant: string;
1071
- inverseSurface: string;
1072
- inverseOnSurface: string;
1073
- inversePrimary: string;
1074
- outlineBright: string;
1075
- outline: string;
1076
- outlineDim: string;
1077
- scrim: string;
1078
- surfaceDim: string;
1079
- surfaceBright: string;
1080
- surfaceContainerBright: string;
1081
- surfaceContainer: string;
1082
- surfaceContainerDim: string;
1083
- };
1084
- interaction: {
1085
- disabled: string;
1086
- disabledOnSurface: string;
1087
- selected: string;
1088
- selectedSurface: string;
1089
- hovered: string;
1090
- hoveredVariant: string;
1091
- hoveredOnPrimary: string;
1092
- };
1093
- chart: {
1094
- mark: {
1095
- primary: {
1096
- "01": string;
1097
- "02": string;
1098
- "03": string;
1099
- "04": string;
1100
- "05": string;
1101
- "06": string;
1102
- };
1103
- positive: {
1104
- "01": string;
1105
- "02": string;
1106
- "03": string;
1107
- "04": string;
1108
- "05": string;
1109
- "06": string;
1110
- };
1111
- negative: {
1112
- "01": string;
1113
- "02": string;
1114
- "03": string;
1115
- "04": string;
1116
- "05": string;
1117
- "06": string;
1118
- };
1119
- notice: {
1120
- "01": string;
1121
- "02": string;
1122
- "03": string;
1123
- "04": string;
1124
- "05": string;
1125
- "06": string;
1126
- };
1127
- multi: {
1128
- 10: string;
1129
- "01": string;
1130
- "02": string;
1131
- "03": string;
1132
- "04": string;
1133
- "05": string;
1134
- "06": string;
1135
- "07": string;
1136
- "08": string;
1137
- "09": string;
1138
- };
1139
- };
1140
- component: {
1141
- onMarkLabel: string;
1142
- inverseOnMarkLabel: string;
1143
- scalemark: string;
1144
- threshold: string;
1145
- chartSurface: string;
1146
- onChartSurface: string;
1147
- };
1148
- };
1149
- };
1150
- };
1151
- };
1152
- };
1153
- };
1154
- };
1155
777
  };
1156
778
  };