@kilivi/payloadcms-theme-management 0.2.9 → 0.2.11

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 (26) hide show
  1. package/dist/constants/themeFonts.d.ts +38 -0
  2. package/dist/constants/themeFonts.d.ts.map +1 -1
  3. package/dist/constants/themeFonts.js +62 -20
  4. package/dist/constants/themeFonts.js.map +1 -1
  5. package/dist/fields/FontSelectField.d.ts +4 -0
  6. package/dist/fields/FontSelectField.d.ts.map +1 -0
  7. package/dist/fields/FontSelectField.js +197 -0
  8. package/dist/fields/FontSelectField.js.map +1 -0
  9. package/dist/fields/ThemeColorPickerField.d.ts.map +1 -1
  10. package/dist/fields/ThemeColorPickerField.js +95 -6
  11. package/dist/fields/ThemeColorPickerField.js.map +1 -1
  12. package/dist/fields/ThemePresetSelectField.d.ts +4 -0
  13. package/dist/fields/ThemePresetSelectField.d.ts.map +1 -0
  14. package/dist/fields/ThemePresetSelectField.js +228 -0
  15. package/dist/fields/ThemePresetSelectField.js.map +1 -0
  16. package/dist/fields/VISUAL_EXAMPLES.d.ts +153 -0
  17. package/dist/fields/VISUAL_EXAMPLES.d.ts.map +1 -0
  18. package/dist/fields/VISUAL_EXAMPLES.js +148 -0
  19. package/dist/fields/VISUAL_EXAMPLES.js.map +1 -0
  20. package/dist/fields/extendedThemeFields.d.ts.map +1 -1
  21. package/dist/fields/extendedThemeFields.js +3 -0
  22. package/dist/fields/extendedThemeFields.js.map +1 -1
  23. package/dist/fields/themeConfigurationField.d.ts.map +1 -1
  24. package/dist/fields/themeConfigurationField.js +9 -3
  25. package/dist/fields/themeConfigurationField.js.map +1 -1
  26. package/package.json +1 -1
package/dist/constants/themeFonts.d.ts CHANGED
@@ -1,43 +1,81 @@
1
1
  export declare const BODY_FONT_OPTIONS: readonly [{
2
+ readonly label: "Use theme preset";
3
+ readonly value: "preset";
4
+ }, {
2
5
  readonly label: "System";
3
6
  readonly value: "system-ui";
7
+ readonly fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
8
+ readonly category: "sans-serif";
4
9
  }, {
5
10
  readonly label: "Inter";
6
11
  readonly value: "Inter";
12
+ readonly fontFamily: "\"Inter\", sans-serif";
13
+ readonly category: "sans-serif";
7
14
  }, {
8
15
  readonly label: "Roboto";
9
16
  readonly value: "Roboto";
17
+ readonly fontFamily: "\"Roboto\", sans-serif";
18
+ readonly category: "sans-serif";
10
19
  }, {
11
20
  readonly label: "Open Sans";
12
21
  readonly value: "Open Sans";
22
+ readonly fontFamily: "\"Open Sans\", sans-serif";
23
+ readonly category: "sans-serif";
13
24
  }, {
14
25
  readonly label: "Lato";
15
26
  readonly value: "Lato";
27
+ readonly fontFamily: "\"Lato\", sans-serif";
28
+ readonly category: "sans-serif";
16
29
  }, {
17
30
  readonly label: "Montserrat";
18
31
  readonly value: "Montserrat";
32
+ readonly fontFamily: "\"Montserrat\", sans-serif";
33
+ readonly category: "sans-serif";
19
34
  }, {
20
35
  readonly label: "Poppins";
21
36
  readonly value: "Poppins";
37
+ readonly fontFamily: "\"Poppins\", sans-serif";
38
+ readonly category: "sans-serif";
39
+ }, {
40
+ readonly label: "Custom font...";
41
+ readonly value: "custom";
22
42
  }];
23
43
  export declare const HEADING_FONT_OPTIONS: readonly [{
44
+ readonly label: "Use theme preset";
45
+ readonly value: "preset";
46
+ }, {
24
47
  readonly label: "System";
25
48
  readonly value: "system-ui";
49
+ readonly fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
50
+ readonly category: "sans-serif";
26
51
  }, {
27
52
  readonly label: "Inter";
28
53
  readonly value: "Inter";
54
+ readonly fontFamily: "\"Inter\", sans-serif";
55
+ readonly category: "sans-serif";
29
56
  }, {
30
57
  readonly label: "Playfair Display";
31
58
  readonly value: "Playfair Display";
59
+ readonly fontFamily: "\"Playfair Display\", serif";
60
+ readonly category: "serif";
32
61
  }, {
33
62
  readonly label: "Merriweather";
34
63
  readonly value: "Merriweather";
64
+ readonly fontFamily: "\"Merriweather\", serif";
65
+ readonly category: "serif";
35
66
  }, {
36
67
  readonly label: "Montserrat";
37
68
  readonly value: "Montserrat";
69
+ readonly fontFamily: "\"Montserrat\", sans-serif";
70
+ readonly category: "sans-serif";
38
71
  }, {
39
72
  readonly label: "Raleway";
40
73
  readonly value: "Raleway";
74
+ readonly fontFamily: "\"Raleway\", sans-serif";
75
+ readonly category: "sans-serif";
76
+ }, {
77
+ readonly label: "Custom font...";
78
+ readonly value: "custom";
41
79
  }];
42
80
  export declare const BASE_FONT_SIZE_OPTIONS: readonly [{
43
81
  readonly label: "14px";
package/dist/constants/themeFonts.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"themeFonts.d.ts","sourceRoot":"","sources":["../../src/constants/themeFonts.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;EAQpB,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEX,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;EAMzB,CAAC;AAEX,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;EAMtB,CAAC;AAEX,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAWpD,CAAC"}
1
+ {"version":3,"file":"themeFonts.d.ts","sourceRoot":"","sources":["../../src/constants/themeFonts.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CpB,CAAA;AAEV,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCvB,CAAA;AAEV,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;EAMzB,CAAA;AAEV,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;EAMtB,CAAA;AAEV,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAWpD,CAAA"}
package/dist/constants/themeFonts.js CHANGED
@@ -1,58 +1,100 @@
1
1
  // Theme font constants for the plugin
2
2
  export const BODY_FONT_OPTIONS = [
3
+ {
4
+ label: 'Use theme preset',
5
+ value: 'preset'
6
+ },
3
7
  {
4
8
  label: 'System',
5
- value: 'system-ui'
9
+ value: 'system-ui',
10
+ fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
11
+ category: 'sans-serif'
6
12
  },
7
13
  {
8
14
  label: 'Inter',
9
- value: 'Inter'
15
+ value: 'Inter',
16
+ fontFamily: '"Inter", sans-serif',
17
+ category: 'sans-serif'
10
18
  },
11
19
  {
12
20
  label: 'Roboto',
13
- value: 'Roboto'
21
+ value: 'Roboto',
22
+ fontFamily: '"Roboto", sans-serif',
23
+ category: 'sans-serif'
14
24
  },
15
25
  {
16
26
  label: 'Open Sans',
17
- value: 'Open Sans'
27
+ value: 'Open Sans',
28
+ fontFamily: '"Open Sans", sans-serif',
29
+ category: 'sans-serif'
18
30
  },
19
31
  {
20
32
  label: 'Lato',
21
- value: 'Lato'
33
+ value: 'Lato',
34
+ fontFamily: '"Lato", sans-serif',
35
+ category: 'sans-serif'
22
36
  },
23
37
  {
24
38
  label: 'Montserrat',
25
- value: 'Montserrat'
39
+ value: 'Montserrat',
40
+ fontFamily: '"Montserrat", sans-serif',
41
+ category: 'sans-serif'
26
42
  },
27
43
  {
28
44
  label: 'Poppins',
29
- value: 'Poppins'
45
+ value: 'Poppins',
46
+ fontFamily: '"Poppins", sans-serif',
47
+ category: 'sans-serif'
48
+ },
49
+ {
50
+ label: 'Custom font...',
51
+ value: 'custom'
30
52
  }
31
53
  ];
32
54
  export const HEADING_FONT_OPTIONS = [
55
+ {
56
+ label: 'Use theme preset',
57
+ value: 'preset'
58
+ },
33
59
  {
34
60
  label: 'System',
35
- value: 'system-ui'
61
+ value: 'system-ui',
62
+ fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
63
+ category: 'sans-serif'
36
64
  },
37
65
  {
38
66
  label: 'Inter',
39
- value: 'Inter'
67
+ value: 'Inter',
68
+ fontFamily: '"Inter", sans-serif',
69
+ category: 'sans-serif'
40
70
  },
41
71
  {
42
72
  label: 'Playfair Display',
43
- value: 'Playfair Display'
73
+ value: 'Playfair Display',
74
+ fontFamily: '"Playfair Display", serif',
75
+ category: 'serif'
44
76
  },
45
77
  {
46
78
  label: 'Merriweather',
47
- value: 'Merriweather'
79
+ value: 'Merriweather',
80
+ fontFamily: '"Merriweather", serif',
81
+ category: 'serif'
48
82
  },
49
83
  {
50
84
  label: 'Montserrat',
51
- value: 'Montserrat'
85
+ value: 'Montserrat',
86
+ fontFamily: '"Montserrat", sans-serif',
87
+ category: 'sans-serif'
52
88
  },
53
89
  {
54
90
  label: 'Raleway',
55
- value: 'Raleway'
91
+ value: 'Raleway',
92
+ fontFamily: '"Raleway", sans-serif',
93
+ category: 'sans-serif'
94
+ },
95
+ {
96
+ label: 'Custom font...',
97
+ value: 'custom'
56
98
  }
57
99
  ];
58
100
  export const BASE_FONT_SIZE_OPTIONS = [
@@ -101,15 +143,15 @@ export const LINE_HEIGHT_OPTIONS = [
101
143
  ];
102
144
  export const FONT_VALUE_TO_CSS = {
103
145
  'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
104
- 'Inter': '"Inter", sans-serif',
105
- 'Roboto': '"Roboto", sans-serif',
146
+ Inter: '"Inter", sans-serif',
147
+ Roboto: '"Roboto", sans-serif',
106
148
  'Open Sans': '"Open Sans", sans-serif',
107
- 'Lato': '"Lato", sans-serif',
108
- 'Montserrat': '"Montserrat", sans-serif',
109
- 'Poppins': '"Poppins", sans-serif',
149
+ Lato: '"Lato", sans-serif',
150
+ Montserrat: '"Montserrat", sans-serif',
151
+ Poppins: '"Poppins", sans-serif',
110
152
  'Playfair Display': '"Playfair Display", serif',
111
- 'Merriweather': '"Merriweather", serif',
112
- 'Raleway': '"Raleway", sans-serif'
153
+ Merriweather: '"Merriweather", serif',
154
+ Raleway: '"Raleway", sans-serif'
113
155
  };
114
156
 
115
157
  //# sourceMappingURL=themeFonts.js.map
package/dist/constants/themeFonts.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/constants/themeFonts.ts"],"sourcesContent":["// Theme font constants for the plugin\nexport const BODY_FONT_OPTIONS = [\n { label: 'System', value: 'system-ui' },\n { label: 'Inter', value: 'Inter' },\n { label: 'Roboto', value: 'Roboto' },\n { label: 'Open Sans', value: 'Open Sans' },\n { label: 'Lato', value: 'Lato' },\n { label: 'Montserrat', value: 'Montserrat' },\n { label: 'Poppins', value: 'Poppins' },\n] as const;\n\nexport const HEADING_FONT_OPTIONS = [\n { label: 'System', value: 'system-ui' },\n { label: 'Inter', value: 'Inter' },\n { label: 'Playfair Display', value: 'Playfair Display' },\n { label: 'Merriweather', value: 'Merriweather' },\n { label: 'Montserrat', value: 'Montserrat' },\n { label: 'Raleway', value: 'Raleway' },\n] as const;\n\nexport const BASE_FONT_SIZE_OPTIONS = [\n { label: '14px', value: '14' },\n { label: '15px', value: '15' },\n { label: '16px', value: '16' },\n { label: '17px', value: '17' },\n { label: '18px', value: '18' },\n] as const;\n\nexport const LINE_HEIGHT_OPTIONS = [\n { label: '1.4', value: '1.4' },\n { label: '1.5', value: '1.5' },\n { label: '1.6', value: '1.6' },\n { label: '1.7', value: '1.7' },\n { label: '1.8', value: '1.8' },\n] as const;\n\nexport const FONT_VALUE_TO_CSS: Record<string, string> = {\n 'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n 'Inter': '\"Inter\", sans-serif',\n 'Roboto': '\"Roboto\", sans-serif',\n 'Open Sans': '\"Open Sans\", sans-serif',\n 'Lato': '\"Lato\", sans-serif',\n 'Montserrat': '\"Montserrat\", sans-serif',\n 'Poppins': '\"Poppins\", sans-serif',\n 'Playfair Display': '\"Playfair Display\", serif',\n 'Merriweather': '\"Merriweather\", serif',\n 'Raleway': '\"Raleway\", sans-serif',\n};\n"],"names":["BODY_FONT_OPTIONS","label","value","HEADING_FONT_OPTIONS","BASE_FONT_SIZE_OPTIONS","LINE_HEIGHT_OPTIONS","FONT_VALUE_TO_CSS"],"mappings":"AAAA,sCAAsC;AACtC,OAAO,MAAMA,oBAAoB;IAC/B;QAAEC,OAAO;QAAUC,OAAO;IAAY;IACtC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAUC,OAAO;IAAS;IACnC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAWC,OAAO;IAAU;CACtC,CAAU;AAEX,OAAO,MAAMC,uBAAuB;IAClC;QAAEF,OAAO;QAAUC,OAAO;IAAY;IACtC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAAoBC,OAAO;IAAmB;IACvD;QAAED,OAAO;QAAgBC,OAAO;IAAe;IAC/C;QAAED,OAAO;QAAcC,OAAO;IAAa;IAC3C;QAAED,OAAO;QAAWC,OAAO;IAAU;CACtC,CAAU;AAEX,OAAO,MAAME,yBAAyB;IACpC;QAAEH,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;CAC9B,CAAU;AAEX,OAAO,MAAMG,sBAAsB;IACjC;QAAEJ,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;CAC9B,CAAU;AAEX,OAAO,MAAMI,oBAA4C;IACvD,aAAa;IACb,SAAS;IACT,UAAU;IACV,aAAa;IACb,QAAQ;IACR,cAAc;IACd,WAAW;IACX,oBAAoB;IACpB,gBAAgB;IAChB,WAAW;AACb,EAAE"}
1
+ {"version":3,"sources":["../../src/constants/themeFonts.ts"],"sourcesContent":["// Theme font constants for the plugin\nexport const BODY_FONT_OPTIONS = [\n { label: 'Use theme preset', value: 'preset' },\n {\n label: 'System',\n value: 'system-ui',\n fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Inter',\n value: 'Inter',\n fontFamily: '\"Inter\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Roboto',\n value: 'Roboto',\n fontFamily: '\"Roboto\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Open Sans',\n value: 'Open Sans',\n fontFamily: '\"Open Sans\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Lato',\n value: 'Lato',\n fontFamily: '\"Lato\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Montserrat',\n value: 'Montserrat',\n fontFamily: '\"Montserrat\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Poppins',\n value: 'Poppins',\n fontFamily: '\"Poppins\", sans-serif',\n category: 'sans-serif' as const,\n },\n { label: 'Custom font...', value: 'custom' },\n] as const\n\nexport const HEADING_FONT_OPTIONS = [\n { label: 'Use theme preset', value: 'preset' },\n {\n label: 'System',\n value: 'system-ui',\n fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Inter',\n value: 'Inter',\n fontFamily: '\"Inter\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Playfair Display',\n value: 'Playfair Display',\n fontFamily: '\"Playfair Display\", serif',\n category: 'serif' as const,\n },\n {\n label: 'Merriweather',\n value: 'Merriweather',\n fontFamily: '\"Merriweather\", serif',\n category: 'serif' as const,\n },\n {\n label: 'Montserrat',\n value: 'Montserrat',\n fontFamily: '\"Montserrat\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Raleway',\n value: 'Raleway',\n fontFamily: '\"Raleway\", sans-serif',\n category: 'sans-serif' as const,\n },\n { label: 'Custom font...', value: 'custom' },\n] as const\n\nexport const BASE_FONT_SIZE_OPTIONS = [\n { label: '14px', value: '14' },\n { label: '15px', value: '15' },\n { label: '16px', value: '16' },\n { label: '17px', value: '17' },\n { label: '18px', value: '18' },\n] as const\n\nexport const LINE_HEIGHT_OPTIONS = [\n { label: '1.4', value: '1.4' },\n { label: '1.5', value: '1.5' },\n { label: '1.6', value: '1.6' },\n { label: '1.7', value: '1.7' },\n { label: '1.8', value: '1.8' },\n] as const\n\nexport const FONT_VALUE_TO_CSS: Record<string, string> = {\n 'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n Inter: '\"Inter\", sans-serif',\n Roboto: '\"Roboto\", sans-serif',\n 'Open Sans': '\"Open Sans\", sans-serif',\n Lato: '\"Lato\", sans-serif',\n Montserrat: '\"Montserrat\", sans-serif',\n Poppins: '\"Poppins\", sans-serif',\n 'Playfair Display': '\"Playfair Display\", serif',\n Merriweather: '\"Merriweather\", serif',\n Raleway: '\"Raleway\", sans-serif',\n}\n"],"names":["BODY_FONT_OPTIONS","label","value","fontFamily","category","HEADING_FONT_OPTIONS","BASE_FONT_SIZE_OPTIONS","LINE_HEIGHT_OPTIONS","FONT_VALUE_TO_CSS","Inter","Roboto","Lato","Montserrat","Poppins","Merriweather","Raleway"],"mappings":"AAAA,sCAAsC;AACtC,OAAO,MAAMA,oBAAoB;IAC/B;QAAEC,OAAO;QAAoBC,OAAO;IAAS;IAC7C;QACED,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QAAEH,OAAO;QAAkBC,OAAO;IAAS;CAC5C,CAAS;AAEV,OAAO,MAAMG,uBAAuB;IAClC;QAAEJ,OAAO;QAAoBC,OAAO;IAAS;IAC7C;QACED,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QAAEH,OAAO;QAAkBC,OAAO;IAAS;CAC5C,CAAS;AAEV,OAAO,MAAMI,yBAAyB;IACpC;QAAEL,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;CAC9B,CAAS;AAEV,OAAO,MAAMK,sBAAsB;IACjC;QAAEN,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;CAC9B,CAAS;AAEV,OAAO,MAAMM,oBAA4C;IACvD,aAAa;IACbC,OAAO;IACPC,QAAQ;IACR,aAAa;IACbC,MAAM;IACNC,YAAY;IACZC,SAAS;IACT,oBAAoB;IACpBC,cAAc;IACdC,SAAS;AACX,EAAC"}
package/dist/fields/FontSelectField.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { SelectFieldClientComponent } from 'payload';
2
+ declare const FontSelectField: SelectFieldClientComponent;
3
+ export default FontSelectField;
4
+ //# sourceMappingURL=FontSelectField.d.ts.map
package/dist/fields/FontSelectField.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FontSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/FontSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAUzD,QAAA,MAAM,eAAe,EAAE,0BA+LtB,CAAA;AAED,eAAe,eAAe,CAAA"}
package/dist/fields/FontSelectField.js ADDED
@@ -0,0 +1,197 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { useField } from '@payloadcms/ui';
4
+ import { useEffect, useState } from 'react';
5
+ const FontSelectField = ({ field, path })=>{
6
+ const { value, setValue } = useField({
7
+ path
8
+ });
9
+ const [isOpen, setIsOpen] = useState(false);
10
+ const options = field.options || [];
11
+ const selectedOption = options.find((opt)=>opt.value === value);
12
+ const handleSelect = (optionValue)=>{
13
+ setValue(optionValue);
14
+ setIsOpen(false);
15
+ };
16
+ useEffect(()=>{
17
+ const handleClickOutside = (e)=>{
18
+ const target = e.target;
19
+ if (!target.closest('.font-select-container')) {
20
+ setIsOpen(false);
21
+ }
22
+ };
23
+ if (isOpen) {
24
+ document.addEventListener('mousedown', handleClickOutside);
25
+ return ()=>document.removeEventListener('mousedown', handleClickOutside);
26
+ }
27
+ }, [
28
+ isOpen
29
+ ]);
30
+ const label = typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Font';
31
+ return /*#__PURE__*/ _jsxs("div", {
32
+ className: "font-select-container",
33
+ style: {
34
+ position: 'relative',
35
+ marginBottom: '12px'
36
+ },
37
+ children: [
38
+ /*#__PURE__*/ _jsx("label", {
39
+ style: {
40
+ display: 'block',
41
+ marginBottom: '6px',
42
+ fontSize: '13px',
43
+ fontWeight: 600,
44
+ color: 'var(--theme-elevation-800)'
45
+ },
46
+ children: label
47
+ }),
48
+ /*#__PURE__*/ _jsxs("button", {
49
+ type: "button",
50
+ onClick: ()=>setIsOpen(!isOpen),
51
+ style: {
52
+ width: '100%',
53
+ padding: '10px 14px',
54
+ borderRadius: '6px',
55
+ border: '1px solid var(--theme-elevation-200)',
56
+ backgroundColor: 'var(--theme-input-bg)',
57
+ color: 'var(--theme-elevation-800)',
58
+ textAlign: 'left',
59
+ cursor: 'pointer',
60
+ display: 'flex',
61
+ justifyContent: 'space-between',
62
+ alignItems: 'center',
63
+ fontSize: '14px',
64
+ fontFamily: selectedOption?.fontFamily || 'inherit',
65
+ transition: 'border-color 0.2s ease'
66
+ },
67
+ onMouseEnter: (e)=>{
68
+ e.currentTarget.style.borderColor = 'var(--theme-elevation-400)';
69
+ },
70
+ onMouseLeave: (e)=>{
71
+ e.currentTarget.style.borderColor = 'var(--theme-elevation-200)';
72
+ },
73
+ children: [
74
+ /*#__PURE__*/ _jsx("span", {
75
+ style: {
76
+ flex: 1
77
+ },
78
+ children: selectedOption?.label || 'Select font...'
79
+ }),
80
+ /*#__PURE__*/ _jsx("svg", {
81
+ width: "12",
82
+ height: "12",
83
+ viewBox: "0 0 12 12",
84
+ fill: "none",
85
+ style: {
86
+ transition: 'transform 0.2s ease',
87
+ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
88
+ },
89
+ children: /*#__PURE__*/ _jsx("path", {
90
+ d: "M3 4.5L6 7.5L9 4.5",
91
+ stroke: "currentColor",
92
+ strokeWidth: "1.5",
93
+ strokeLinecap: "round",
94
+ strokeLinejoin: "round"
95
+ })
96
+ })
97
+ ]
98
+ }),
99
+ isOpen && /*#__PURE__*/ _jsx("div", {
100
+ style: {
101
+ position: 'absolute',
102
+ top: '100%',
103
+ left: 0,
104
+ right: 0,
105
+ marginTop: '4px',
106
+ maxHeight: '280px',
107
+ overflowY: 'auto',
108
+ backgroundColor: 'var(--theme-elevation-0)',
109
+ border: '1px solid var(--theme-elevation-200)',
110
+ borderRadius: '8px',
111
+ boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
112
+ zIndex: 1000
113
+ },
114
+ children: options.map((option)=>{
115
+ const isSelected = option.value === value;
116
+ let fontFamily = option.fontFamily;
117
+ if (!fontFamily) {
118
+ if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif';
119
+ else if (option.category === 'serif') fontFamily = 'Georgia, serif';
120
+ else if (option.category === 'monospace') fontFamily = 'monospace';
121
+ else fontFamily = 'inherit';
122
+ }
123
+ return /*#__PURE__*/ _jsxs("button", {
124
+ type: "button",
125
+ onClick: ()=>handleSelect(option.value),
126
+ style: {
127
+ width: '100%',
128
+ padding: '12px 14px',
129
+ border: 'none',
130
+ backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',
131
+ color: 'var(--theme-elevation-800)',
132
+ textAlign: 'left',
133
+ cursor: 'pointer',
134
+ fontSize: '14px',
135
+ fontFamily,
136
+ display: 'flex',
137
+ flexDirection: 'column',
138
+ gap: '4px',
139
+ transition: 'background-color 0.15s ease'
140
+ },
141
+ onMouseEnter: (e)=>{
142
+ if (!isSelected) {
143
+ e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)';
144
+ }
145
+ },
146
+ onMouseLeave: (e)=>{
147
+ if (!isSelected) {
148
+ e.currentTarget.style.backgroundColor = 'transparent';
149
+ }
150
+ },
151
+ children: [
152
+ /*#__PURE__*/ _jsxs("div", {
153
+ style: {
154
+ fontWeight: isSelected ? 600 : 500,
155
+ display: 'flex',
156
+ alignItems: 'center',
157
+ gap: '8px'
158
+ },
159
+ children: [
160
+ isSelected && /*#__PURE__*/ _jsx("svg", {
161
+ width: "14",
162
+ height: "14",
163
+ viewBox: "0 0 14 14",
164
+ fill: "none",
165
+ children: /*#__PURE__*/ _jsx("path", {
166
+ d: "M11.6667 3.5L5.25 9.91667L2.33334 7",
167
+ stroke: "var(--theme-elevation-500)",
168
+ strokeWidth: "2",
169
+ strokeLinecap: "round",
170
+ strokeLinejoin: "round"
171
+ })
172
+ }),
173
+ option.label
174
+ ]
175
+ }),
176
+ /*#__PURE__*/ _jsx("div", {
177
+ style: {
178
+ fontSize: '16px',
179
+ color: 'var(--theme-elevation-600)',
180
+ fontStyle: option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal'
181
+ },
182
+ children: (()=>{
183
+ if (option.value === 'preset') return 'Use theme preset font';
184
+ if (option.value === 'custom') return 'Specify custom font below';
185
+ return 'The quick brown fox jumps over the lazy dog';
186
+ })()
187
+ })
188
+ ]
189
+ }, option.value);
190
+ })
191
+ })
192
+ ]
193
+ });
194
+ };
195
+ export default FontSelectField;
196
+
197
+ //# sourceMappingURL=FontSelectField.js.map
package/dist/fields/FontSelectField.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/fields/FontSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useEffect, useState } from 'react'\n\ninterface FontOption {\n label: string\n value: string\n fontFamily?: string\n category?: 'sans-serif' | 'serif' | 'monospace' | 'display'\n}\n\nconst FontSelectField: SelectFieldClientComponent = ({ field, path }) => {\n const { value, setValue } = useField<string>({ path })\n const [isOpen, setIsOpen] = useState(false)\n\n const options = (field.options as FontOption[]) || []\n const selectedOption = options.find((opt) => opt.value === value)\n\n const handleSelect = (optionValue: string) => {\n setValue(optionValue)\n setIsOpen(false)\n }\n\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n const target = e.target as HTMLElement\n if (!target.closest('.font-select-container')) {\n setIsOpen(false)\n }\n }\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [isOpen])\n\n const label =\n typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Font'\n\n return (\n <div className=\"font-select-container\" style={{ position: 'relative', marginBottom: '12px' }}>\n <label\n style={{\n display: 'block',\n marginBottom: '6px',\n fontSize: '13px',\n fontWeight: 600,\n color: 'var(--theme-elevation-800)',\n }}\n >\n {label}\n </label>\n\n <button\n type=\"button\"\n onClick={() => setIsOpen(!isOpen)}\n style={{\n width: '100%',\n padding: '10px 14px',\n borderRadius: '6px',\n border: '1px solid var(--theme-elevation-200)',\n backgroundColor: 'var(--theme-input-bg)',\n color: 'var(--theme-elevation-800)',\n textAlign: 'left',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n fontSize: '14px',\n fontFamily: selectedOption?.fontFamily || 'inherit',\n transition: 'border-color 0.2s ease',\n }}\n onMouseEnter={(e) => {\n e.currentTarget.style.borderColor = 'var(--theme-elevation-400)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.borderColor = 'var(--theme-elevation-200)'\n }}\n >\n <span style={{ flex: 1 }}>{selectedOption?.label || 'Select font...'}</span>\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n style={{\n transition: 'transform 0.2s ease',\n transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n }}\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n\n {isOpen && (\n <div\n style={{\n position: 'absolute',\n top: '100%',\n left: 0,\n right: 0,\n marginTop: '4px',\n maxHeight: '280px',\n overflowY: 'auto',\n backgroundColor: 'var(--theme-elevation-0)',\n border: '1px solid var(--theme-elevation-200)',\n borderRadius: '8px',\n boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n zIndex: 1000,\n }}\n >\n {options.map((option) => {\n const isSelected = option.value === value\n\n let fontFamily = option.fontFamily\n if (!fontFamily) {\n if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif'\n else if (option.category === 'serif') fontFamily = 'Georgia, serif'\n else if (option.category === 'monospace') fontFamily = 'monospace'\n else fontFamily = 'inherit'\n }\n\n return (\n <button\n key={option.value}\n type=\"button\"\n onClick={() => handleSelect(option.value)}\n style={{\n width: '100%',\n padding: '12px 14px',\n border: 'none',\n backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',\n color: 'var(--theme-elevation-800)',\n textAlign: 'left',\n cursor: 'pointer',\n fontSize: '14px',\n fontFamily,\n display: 'flex',\n flexDirection: 'column',\n gap: '4px',\n transition: 'background-color 0.15s ease',\n }}\n onMouseEnter={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'transparent'\n }\n }}\n >\n <div\n style={{\n fontWeight: isSelected ? 600 : 500,\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n }}\n >\n {isSelected && (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M11.6667 3.5L5.25 9.91667L2.33334 7\"\n stroke=\"var(--theme-elevation-500)\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )}\n {option.label}\n </div>\n <div\n style={{\n fontSize: '16px',\n color: 'var(--theme-elevation-600)',\n fontStyle:\n option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',\n }}\n >\n {(() => {\n if (option.value === 'preset') return 'Use theme preset font'\n if (option.value === 'custom') return 'Specify custom font below'\n return 'The quick brown fox jumps over the lazy dog'\n })()}\n </div>\n </button>\n )\n })}\n </div>\n )}\n </div>\n )\n}\n\nexport default FontSelectField\n"],"names":["useField","useEffect","useState","FontSelectField","field","path","value","setValue","isOpen","setIsOpen","options","selectedOption","find","opt","handleSelect","optionValue","handleClickOutside","e","target","closest","document","addEventListener","removeEventListener","label","en","cs","div","className","style","position","marginBottom","display","fontSize","fontWeight","color","button","type","onClick","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","fontFamily","transition","onMouseEnter","currentTarget","borderColor","onMouseLeave","span","flex","svg","height","viewBox","fill","transform","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","top","left","right","marginTop","maxHeight","overflowY","boxShadow","zIndex","map","option","isSelected","category","flexDirection","gap","fontStyle"],"mappings":"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"}
package/dist/fields/ThemeColorPickerField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAqGvD,QAAA,MAAM,qBAAqB,EAAE,wBAgL5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}
1
+ {"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAqGvD,QAAA,MAAM,qBAAqB,EAAE,wBAwQ5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}
package/dist/fields/ThemeColorPickerField.js CHANGED
@@ -185,6 +185,9 @@ const ThemeColorPickerField = ({ field, path })=>{
185
185
  }),
186
186
  /*#__PURE__*/ _jsxs("div", {
187
187
  className: "color-picker-container",
188
+ style: {
189
+ position: 'relative'
190
+ },
188
191
  children: [
189
192
  /*#__PURE__*/ _jsxs("div", {
190
193
  className: "color-input-wrapper",
@@ -208,28 +211,114 @@ const ThemeColorPickerField = ({ field, path })=>{
208
211
  ]
209
212
  }),
210
213
  showPicker && /*#__PURE__*/ _jsxs("div", {
211
- className: "color-picker-popover",
212
214
  ref: pickerRef,
215
+ style: {
216
+ position: 'absolute',
217
+ top: '100%',
218
+ left: 0,
219
+ marginTop: '8px',
220
+ padding: '16px',
221
+ backgroundColor: 'var(--theme-elevation-0)',
222
+ border: '1px solid var(--theme-elevation-200)',
223
+ borderRadius: '8px',
224
+ boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
225
+ zIndex: 1000,
226
+ width: '280px'
227
+ },
213
228
  children: [
214
229
  /*#__PURE__*/ _jsx(HexColorPicker, {
215
230
  color: hexValue,
216
- onChange: handleHexChange
231
+ onChange: handleHexChange,
232
+ style: {
233
+ width: '100%',
234
+ height: '160px'
235
+ }
217
236
  }),
218
237
  /*#__PURE__*/ _jsxs("div", {
219
- className: "picker-footer",
238
+ style: {
239
+ marginTop: '12px',
240
+ display: 'flex',
241
+ gap: '8px',
242
+ alignItems: 'center'
243
+ },
220
244
  children: [
221
245
  /*#__PURE__*/ _jsx(HexColorInput, {
222
246
  color: hexValue,
223
247
  onChange: handleHexChange,
224
248
  prefixed: true,
225
249
  placeholder: "#000000",
226
- className: "hex-input"
250
+ style: {
251
+ flex: 1,
252
+ padding: '8px',
253
+ borderRadius: '4px',
254
+ border: '1px solid var(--theme-elevation-150)',
255
+ fontSize: '13px',
256
+ fontFamily: 'monospace'
257
+ }
227
258
  }),
228
259
  /*#__PURE__*/ _jsx("button", {
229
260
  type: "button",
230
261
  onClick: ()=>setShowPicker(false),
231
- className: "close-button",
232
- children: "Done"
262
+ style: {
263
+ padding: '8px 14px',
264
+ borderRadius: '4px',
265
+ border: 'none',
266
+ backgroundColor: 'var(--theme-elevation-500)',
267
+ color: 'var(--theme-elevation-0)',
268
+ cursor: 'pointer',
269
+ fontSize: '12px',
270
+ fontWeight: 600
271
+ },
272
+ children: "OK"
273
+ })
274
+ ]
275
+ }),
276
+ /*#__PURE__*/ _jsxs("div", {
277
+ style: {
278
+ marginTop: '12px'
279
+ },
280
+ children: [
281
+ /*#__PURE__*/ _jsx("div", {
282
+ style: {
283
+ fontSize: '11px',
284
+ fontWeight: 600,
285
+ marginBottom: '6px',
286
+ color: 'var(--theme-elevation-500)'
287
+ },
288
+ children: "Rychlé barvy"
289
+ }),
290
+ /*#__PURE__*/ _jsx("div", {
291
+ style: {
292
+ display: 'grid',
293
+ gridTemplateColumns: 'repeat(6, 1fr)',
294
+ gap: '6px'
295
+ },
296
+ children: [
297
+ '#ef4444',
298
+ '#f97316',
299
+ '#f59e0b',
300
+ '#84cc16',
301
+ '#10b981',
302
+ '#06b6d4',
303
+ '#3b82f6',
304
+ '#8b5cf6',
305
+ '#ec4899',
306
+ '#64748b',
307
+ '#000000',
308
+ '#ffffff'
309
+ ].map((color)=>/*#__PURE__*/ _jsx("button", {
310
+ type: "button",
311
+ onClick: ()=>handleHexChange(color),
312
+ style: {
313
+ width: '100%',
314
+ height: '28px',
315
+ borderRadius: '4px',
316
+ border: hexValue.toLowerCase() === color.toLowerCase() ? '2px solid var(--theme-elevation-800)' : '1px solid var(--theme-elevation-150)',
317
+ backgroundColor: color,
318
+ cursor: 'pointer'
319
+ },
320
+ "aria-label": `Select ${color}`
321
+ }, color))
233
322
  })
234
323
  ]
235
324
  })