@rainbow-oh/yee-c 0.2.0 → 0.3.0

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 (218) hide show
  1. package/dist/cjs/Button/button.js +2 -2
  2. package/dist/cjs/Button/style/index.less +23 -8
  3. package/dist/cjs/Card/demo/collapsible.js +2 -1
  4. package/dist/cjs/Carousel/demo/arrows.js +1 -1
  5. package/dist/cjs/Carousel/demo/autoplay.js +1 -1
  6. package/dist/cjs/Carousel/demo/effect.js +1 -1
  7. package/dist/cjs/Carousel/demo/position.js +1 -1
  8. package/dist/cjs/Config-Provider/interface.d.ts +4 -0
  9. package/dist/cjs/Form/Field.js +32 -10
  10. package/dist/cjs/Form/interface.d.ts +17 -1
  11. package/dist/cjs/Menu/style/index.less +2 -2
  12. package/dist/cjs/Radio/demo/button.js +1 -0
  13. package/dist/cjs/Radio/interface.d.ts +4 -0
  14. package/dist/cjs/Radio/radio-group.js +28 -14
  15. package/dist/cjs/Radio/radio.js +3 -1
  16. package/dist/cjs/Radio/style/index.less +19 -5
  17. package/dist/cjs/Segmented/demo/basic.d.ts +3 -0
  18. package/dist/cjs/Segmented/demo/basic.js +51 -0
  19. package/dist/cjs/Segmented/demo/block.d.ts +3 -0
  20. package/dist/cjs/Segmented/demo/block.js +49 -0
  21. package/dist/cjs/Segmented/demo/disabled.d.ts +3 -0
  22. package/dist/cjs/Segmented/demo/disabled.js +47 -0
  23. package/dist/cjs/Segmented/demo/size.d.ts +3 -0
  24. package/dist/cjs/Segmented/demo/size.js +37 -0
  25. package/dist/cjs/Segmented/index.d.ts +3 -0
  26. package/dist/cjs/Segmented/index.js +36 -0
  27. package/dist/cjs/Segmented/interface.d.ts +82 -0
  28. package/dist/cjs/Segmented/interface.js +17 -0
  29. package/dist/cjs/Segmented/segmented.d.ts +5 -0
  30. package/dist/cjs/Segmented/segmented.js +177 -0
  31. package/dist/cjs/Segmented/style/index.less +104 -0
  32. package/dist/cjs/Spin/spin.js +2 -1
  33. package/dist/cjs/Steps/step.js +1 -1
  34. package/dist/cjs/Steps/style/index.less +8 -2
  35. package/dist/cjs/Switch/demo/content.js +22 -1
  36. package/dist/cjs/Switch/style/index.less +16 -0
  37. package/dist/cjs/Switch/switch.js +9 -2
  38. package/dist/cjs/Table/interface.d.ts +5 -1
  39. package/dist/cjs/Table/theader/cell.js +4 -5
  40. package/dist/cjs/Tag/demo/size.js +1 -1
  41. package/dist/cjs/Tag/style/index.less +1 -0
  42. package/dist/cjs/Tour/demo/basic.d.ts +3 -0
  43. package/dist/cjs/Tour/demo/basic.js +69 -0
  44. package/dist/cjs/Tour/demo/indicators.d.ts +3 -0
  45. package/dist/cjs/Tour/demo/indicators.js +76 -0
  46. package/dist/cjs/Tour/demo/placement.d.ts +3 -0
  47. package/dist/cjs/Tour/demo/placement.js +80 -0
  48. package/dist/cjs/Tour/demo/scroll.d.ts +3 -0
  49. package/dist/cjs/Tour/demo/scroll.js +72 -0
  50. package/dist/cjs/Tour/index.d.ts +3 -0
  51. package/dist/cjs/Tour/index.js +36 -0
  52. package/dist/cjs/Tour/interface.d.ts +118 -0
  53. package/dist/cjs/Tour/interface.js +17 -0
  54. package/dist/cjs/Tour/style/index.less +103 -0
  55. package/dist/cjs/Tour/tour.d.ts +5 -0
  56. package/dist/cjs/Tour/tour.js +403 -0
  57. package/dist/cjs/Tree/demo/checkable.js +6 -6
  58. package/dist/cjs/index.d.ts +4 -0
  59. package/dist/cjs/index.js +6 -0
  60. package/dist/cjs/locale/interface.d.ts +7 -0
  61. package/dist/cjs/locale/lang/en_US.js +6 -0
  62. package/dist/cjs/locale/lang/ja_JP.js +6 -0
  63. package/dist/cjs/locale/lang/zh_CN.js +6 -0
  64. package/dist/cjs/locale/lang/zh_TW.js +6 -0
  65. package/dist/cjs/style/color.blue.css +1 -1
  66. package/dist/cjs/style/color.crimson.css +1 -1
  67. package/dist/cjs/style/color.css +18 -1
  68. package/dist/cjs/style/size.css +38 -0
  69. package/dist/cjs/style/themes.css +3 -3
  70. package/dist/cjs/style/variables.css +57 -2
  71. package/dist/cjs/version.d.ts +1 -1
  72. package/dist/cjs/version.js +1 -1
  73. package/dist/esm/Button/button.js +2 -2
  74. package/dist/esm/Button/style/index.less +23 -8
  75. package/dist/esm/Card/demo/collapsible.js +2 -1
  76. package/dist/esm/Carousel/demo/arrows.js +1 -1
  77. package/dist/esm/Carousel/demo/autoplay.js +1 -1
  78. package/dist/esm/Carousel/demo/effect.js +1 -1
  79. package/dist/esm/Carousel/demo/position.js +1 -1
  80. package/dist/esm/Config-Provider/interface.d.ts +4 -0
  81. package/dist/esm/Form/Field.js +11 -4
  82. package/dist/esm/Form/interface.d.ts +17 -1
  83. package/dist/esm/Menu/style/index.less +2 -2
  84. package/dist/esm/Radio/demo/button.js +1 -0
  85. package/dist/esm/Radio/interface.d.ts +4 -0
  86. package/dist/esm/Radio/radio-group.js +9 -2
  87. package/dist/esm/Radio/radio.js +3 -1
  88. package/dist/esm/Radio/style/index.less +19 -5
  89. package/dist/esm/Segmented/demo/basic.d.ts +3 -0
  90. package/dist/esm/Segmented/demo/basic.js +33 -0
  91. package/dist/esm/Segmented/demo/block.d.ts +3 -0
  92. package/dist/esm/Segmented/demo/block.js +29 -0
  93. package/dist/esm/Segmented/demo/disabled.d.ts +3 -0
  94. package/dist/esm/Segmented/demo/disabled.js +22 -0
  95. package/dist/esm/Segmented/demo/size.d.ts +3 -0
  96. package/dist/esm/Segmented/demo/size.js +15 -0
  97. package/dist/esm/Segmented/index.d.ts +3 -0
  98. package/dist/esm/Segmented/index.js +2 -0
  99. package/dist/esm/Segmented/interface.d.ts +82 -0
  100. package/dist/esm/Segmented/interface.js +1 -0
  101. package/dist/esm/Segmented/segmented.d.ts +5 -0
  102. package/dist/esm/Segmented/segmented.js +110 -0
  103. package/dist/esm/Segmented/style/index.less +104 -0
  104. package/dist/esm/Spin/spin.js +2 -1
  105. package/dist/esm/Steps/step.js +4 -1
  106. package/dist/esm/Steps/style/index.less +8 -2
  107. package/dist/esm/Switch/demo/content.js +12 -3
  108. package/dist/esm/Switch/style/index.less +16 -0
  109. package/dist/esm/Switch/switch.js +7 -5
  110. package/dist/esm/Table/interface.d.ts +5 -1
  111. package/dist/esm/Table/theader/cell.js +2 -3
  112. package/dist/esm/Tag/demo/size.js +6 -2
  113. package/dist/esm/Tag/style/index.less +1 -0
  114. package/dist/esm/Tour/demo/basic.d.ts +3 -0
  115. package/dist/esm/Tour/demo/basic.js +69 -0
  116. package/dist/esm/Tour/demo/indicators.d.ts +3 -0
  117. package/dist/esm/Tour/demo/indicators.js +73 -0
  118. package/dist/esm/Tour/demo/placement.d.ts +3 -0
  119. package/dist/esm/Tour/demo/placement.js +53 -0
  120. package/dist/esm/Tour/demo/scroll.d.ts +3 -0
  121. package/dist/esm/Tour/demo/scroll.js +58 -0
  122. package/dist/esm/Tour/index.d.ts +3 -0
  123. package/dist/esm/Tour/index.js +2 -0
  124. package/dist/esm/Tour/interface.d.ts +118 -0
  125. package/dist/esm/Tour/interface.js +1 -0
  126. package/dist/esm/Tour/style/index.less +103 -0
  127. package/dist/esm/Tour/tour.d.ts +5 -0
  128. package/dist/esm/Tour/tour.js +383 -0
  129. package/dist/esm/Tree/demo/checkable.js +6 -6
  130. package/dist/esm/index.d.ts +4 -0
  131. package/dist/esm/index.js +4 -0
  132. package/dist/esm/locale/interface.d.ts +7 -0
  133. package/dist/esm/locale/lang/en_US.js +6 -0
  134. package/dist/esm/locale/lang/ja_JP.js +6 -0
  135. package/dist/esm/locale/lang/zh_CN.js +6 -0
  136. package/dist/esm/locale/lang/zh_TW.js +6 -0
  137. package/dist/esm/style/color.blue.css +1 -1
  138. package/dist/esm/style/color.crimson.css +1 -1
  139. package/dist/esm/style/color.css +18 -1
  140. package/dist/esm/style/size.css +38 -0
  141. package/dist/esm/style/themes.css +3 -3
  142. package/dist/esm/style/variables.css +57 -2
  143. package/dist/esm/version.d.ts +1 -1
  144. package/dist/esm/version.js +1 -1
  145. package/dist/umd/yee-c.min.css +3 -3
  146. package/dist/umd/yee-c.min.js +1 -1
  147. package/package.json +1 -1
  148. package/src/Button/button.tsx +2 -2
  149. package/src/Button/style/index.less +23 -8
  150. package/src/Card/demo/collapsible.tsx +1 -0
  151. package/src/Carousel/demo/arrows.tsx +1 -1
  152. package/src/Carousel/demo/autoplay.tsx +1 -1
  153. package/src/Carousel/demo/effect.tsx +1 -1
  154. package/src/Carousel/demo/position.tsx +1 -1
  155. package/src/Config-Provider/index.en-US.md +2 -0
  156. package/src/Config-Provider/index.zh-CN.md +2 -0
  157. package/src/Config-Provider/interface.ts +4 -0
  158. package/src/Form/Field.tsx +30 -11
  159. package/src/Form/index.en-US.md +4 -0
  160. package/src/Form/index.zh-CN.md +4 -0
  161. package/src/Form/interface.ts +17 -1
  162. package/src/Menu/style/index.less +2 -2
  163. package/src/Radio/demo/button.tsx +1 -0
  164. package/src/Radio/index.en-US.md +2 -0
  165. package/src/Radio/index.zh-CN.md +2 -0
  166. package/src/Radio/interface.ts +4 -0
  167. package/src/Radio/radio-group.tsx +9 -1
  168. package/src/Radio/radio.tsx +2 -1
  169. package/src/Radio/style/index.less +19 -5
  170. package/src/Segmented/demo/basic.tsx +24 -0
  171. package/src/Segmented/demo/block.tsx +17 -0
  172. package/src/Segmented/demo/disabled.tsx +18 -0
  173. package/src/Segmented/demo/size.tsx +10 -0
  174. package/src/Segmented/index.en-US.md +47 -0
  175. package/src/Segmented/index.ts +12 -0
  176. package/src/Segmented/index.zh-CN.md +47 -0
  177. package/src/Segmented/interface.ts +87 -0
  178. package/src/Segmented/segmented.tsx +134 -0
  179. package/src/Segmented/style/index.less +104 -0
  180. package/src/Spin/spin.tsx +1 -0
  181. package/src/Steps/step.tsx +1 -1
  182. package/src/Steps/style/index.less +8 -2
  183. package/src/Switch/demo/content.tsx +15 -5
  184. package/src/Switch/style/index.less +16 -0
  185. package/src/Switch/switch.tsx +14 -6
  186. package/src/Table/index.en-US.md +1 -0
  187. package/src/Table/index.zh-CN.md +1 -0
  188. package/src/Table/interface.ts +5 -1
  189. package/src/Table/theader/cell.tsx +2 -9
  190. package/src/Tag/demo/size.tsx +2 -2
  191. package/src/Tag/style/index.less +1 -0
  192. package/src/Tour/demo/basic.tsx +52 -0
  193. package/src/Tour/demo/indicators.tsx +63 -0
  194. package/src/Tour/demo/placement.tsx +55 -0
  195. package/src/Tour/demo/scroll.tsx +49 -0
  196. package/src/Tour/index.en-US.md +61 -0
  197. package/src/Tour/index.ts +10 -0
  198. package/src/Tour/index.zh-CN.md +61 -0
  199. package/src/Tour/interface.ts +126 -0
  200. package/src/Tour/style/index.less +103 -0
  201. package/src/Tour/tour.tsx +399 -0
  202. package/src/Tree/demo/checkable.tsx +6 -6
  203. package/src/index.ts +6 -0
  204. package/src/locale/interface.ts +9 -0
  205. package/src/locale/lang/en_US.ts +7 -0
  206. package/src/locale/lang/ja_JP.ts +7 -0
  207. package/src/locale/lang/zh_CN.ts +7 -0
  208. package/src/locale/lang/zh_TW.ts +7 -0
  209. package/src/style/color.blue.css +1 -1
  210. package/src/style/color.crimson.css +1 -1
  211. package/src/style/color.css +18 -1
  212. package/src/style/size.css +38 -0
  213. package/src/version.ts +1 -1
  214. package/dist/cjs/utils/x.d.ts +0 -11
  215. package/dist/cjs/utils/x.js +0 -51
  216. package/dist/esm/utils/x.d.ts +0 -11
  217. package/dist/esm/utils/x.js +0 -49
  218. package/src/utils/x.ts +0 -33
@@ -0,0 +1,403 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
+ var __spreadValues = (a, b) => {
11
+ for (var prop in b || (b = {}))
12
+ if (__hasOwnProp.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ if (__getOwnPropSymbols)
15
+ for (var prop of __getOwnPropSymbols(b)) {
16
+ if (__propIsEnum.call(b, prop))
17
+ __defNormalProp(a, prop, b[prop]);
18
+ }
19
+ return a;
20
+ };
21
+ var __objRest = (source, exclude) => {
22
+ var target = {};
23
+ for (var prop in source)
24
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
25
+ target[prop] = source[prop];
26
+ if (source != null && __getOwnPropSymbols)
27
+ for (var prop of __getOwnPropSymbols(source)) {
28
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
29
+ target[prop] = source[prop];
30
+ }
31
+ return target;
32
+ };
33
+ var __export = (target, all) => {
34
+ for (var name in all)
35
+ __defProp(target, name, { get: all[name], enumerable: true });
36
+ };
37
+ var __copyProps = (to, from, except, desc) => {
38
+ if (from && typeof from === "object" || typeof from === "function") {
39
+ for (let key of __getOwnPropNames(from))
40
+ if (!__hasOwnProp.call(to, key) && key !== except)
41
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
42
+ }
43
+ return to;
44
+ };
45
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
46
+ // If the importer is in node compatibility mode or this is not an ESM
47
+ // file that has been converted to a CommonJS file using a Babel-
48
+ // compatible transform (i.e. "__esModule" has not been set), then set
49
+ // "default" to the CommonJS "module.exports" for node compatibility.
50
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
51
+ mod
52
+ ));
53
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
54
+
55
+ // src/Tour/tour.tsx
56
+ var tour_exports = {};
57
+ __export(tour_exports, {
58
+ default: () => tour_default
59
+ });
60
+ module.exports = __toCommonJS(tour_exports);
61
+ var import_clsx = __toESM(require("clsx"));
62
+ var import_lucide_react = require("lucide-react");
63
+ var import_react = require("motion/react");
64
+ var import_react2 = __toESM(require("react"));
65
+ var import_react_dom = require("react-dom");
66
+ var import_Button = __toESM(require("../Button"));
67
+ var import_Config_Provider = require("../Config-Provider");
68
+ var import_useEsc = __toESM(require("../hooks/useEsc"));
69
+ var import_useLatest = __toESM(require("../hooks/useLatest"));
70
+ var import_useMergedState = __toESM(require("../hooks/useMergedState"));
71
+ var import_locale = require("../locale");
72
+ var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
73
+ var import_style = require("./style/index.less");
74
+ var GAP = 12;
75
+ var resolveTarget = (target) => {
76
+ if (!target)
77
+ return null;
78
+ if (typeof target === "function") {
79
+ try {
80
+ return target();
81
+ } catch (e) {
82
+ return null;
83
+ }
84
+ }
85
+ if (typeof target === "string") {
86
+ if (typeof document === "undefined")
87
+ return null;
88
+ return document.querySelector(target);
89
+ }
90
+ return target;
91
+ };
92
+ var SIDE_PREFIXES = ["top", "bottom", "left", "right"];
93
+ var parsePlacement = (p) => {
94
+ var _a;
95
+ if (!p)
96
+ return { side: "bottom", align: "center" };
97
+ const side = (_a = SIDE_PREFIXES.find((s) => p.startsWith(s))) != null ? _a : "bottom";
98
+ const rest = p.slice(side.length);
99
+ let align = "center";
100
+ if (side === "top" || side === "bottom") {
101
+ if (rest === "Left")
102
+ align = "start";
103
+ else if (rest === "Right")
104
+ align = "end";
105
+ } else if (rest === "Top") {
106
+ align = "start";
107
+ } else if (rest === "Bottom") {
108
+ align = "end";
109
+ }
110
+ return { side, align };
111
+ };
112
+ var OPPOSITE_SIDE = {
113
+ top: "bottom",
114
+ bottom: "top",
115
+ left: "right",
116
+ right: "left"
117
+ };
118
+ var computeCardPos = (rect, placement, size, gap) => {
119
+ const { width: cw, height: ch } = size;
120
+ const { top, left, width, height } = rect;
121
+ if (cw === 0 || ch === 0) {
122
+ return { top, left };
123
+ }
124
+ const vw = window.innerWidth;
125
+ const vh = window.innerHeight;
126
+ const { side: preferredSide, align } = parsePlacement(placement);
127
+ const layoutFor = (side2) => {
128
+ if (side2 === "top" || side2 === "bottom") {
129
+ const main2 = side2 === "top" ? top - ch - gap : top + height + gap;
130
+ let cross2;
131
+ if (align === "start")
132
+ cross2 = left;
133
+ else if (align === "end")
134
+ cross2 = left + width - cw;
135
+ else
136
+ cross2 = left + width / 2 - cw / 2;
137
+ return { top: main2, left: cross2 };
138
+ }
139
+ const main = side2 === "left" ? left - cw - gap : left + width + gap;
140
+ let cross;
141
+ if (align === "start")
142
+ cross = top;
143
+ else if (align === "end")
144
+ cross = top + height - ch;
145
+ else
146
+ cross = top + height / 2 - ch / 2;
147
+ return { top: cross, left: main };
148
+ };
149
+ const fits = (side2, pos2) => {
150
+ if (side2 === "top")
151
+ return pos2.top >= gap;
152
+ if (side2 === "bottom")
153
+ return pos2.top + ch <= vh - gap;
154
+ if (side2 === "left")
155
+ return pos2.left >= gap;
156
+ return pos2.left + cw <= vw - gap;
157
+ };
158
+ let side = preferredSide;
159
+ let pos = layoutFor(side);
160
+ const flippedSide = OPPOSITE_SIDE[side];
161
+ const flipped = layoutFor(flippedSide);
162
+ if (!fits(side, pos) && fits(flippedSide, flipped)) {
163
+ side = flippedSide;
164
+ pos = flipped;
165
+ }
166
+ return {
167
+ top: Math.max(gap, Math.min(pos.top, vh - ch - gap)),
168
+ left: Math.max(gap, Math.min(pos.left, vw - cw - gap))
169
+ };
170
+ };
171
+ var Tour = (baseprops) => {
172
+ var _a, _c;
173
+ const { tour: tourCtx } = (0, import_react2.useContext)(import_Config_Provider.GlobalContext);
174
+ const props = (0, import_mergeContextToProps.default)(baseprops, tourCtx);
175
+ const { locale } = (0, import_locale.useLocale)();
176
+ const tourLocale = (_a = locale == null ? void 0 : locale.tour) != null ? _a : {
177
+ previous: "Previous",
178
+ next: "Next",
179
+ finish: "Finish",
180
+ skip: "Skip"
181
+ };
182
+ const _b = props, {
183
+ prefixCls = "yee-tour",
184
+ className,
185
+ style,
186
+ classNames,
187
+ styles,
188
+ open,
189
+ steps = [],
190
+ current,
191
+ defaultCurrent = 0,
192
+ onClose,
193
+ onFinish,
194
+ onChange,
195
+ placement = "bottom",
196
+ mask = true,
197
+ closable = true,
198
+ closeIcon,
199
+ maskClosable = false,
200
+ indicatorsRender,
201
+ scrollIntoViewOptions = true
202
+ } = _b, rest = __objRest(_b, [
203
+ "prefixCls",
204
+ "className",
205
+ "style",
206
+ "classNames",
207
+ "styles",
208
+ "open",
209
+ "steps",
210
+ "current",
211
+ "defaultCurrent",
212
+ "onClose",
213
+ "onFinish",
214
+ "onChange",
215
+ "placement",
216
+ "mask",
217
+ "closable",
218
+ "closeIcon",
219
+ "maskClosable",
220
+ "indicatorsRender",
221
+ "scrollIntoViewOptions"
222
+ ]);
223
+ const [mergedCurrent, setMergedCurrent] = (0, import_useMergedState.default)(
224
+ defaultCurrent,
225
+ {
226
+ value: current,
227
+ defaultValue: defaultCurrent
228
+ }
229
+ );
230
+ const step = steps[mergedCurrent];
231
+ const total = steps.length;
232
+ const isLast = mergedCurrent >= total - 1;
233
+ const stepPlacement = (_c = step == null ? void 0 : step.placement) != null ? _c : placement;
234
+ const targetEl = (0, import_react2.useMemo)(
235
+ () => resolveTarget(step == null ? void 0 : step.target),
236
+ [step, open]
237
+ );
238
+ const [rect, setRect] = (0, import_react2.useState)(null);
239
+ const rafRef = (0, import_react2.useRef)(null);
240
+ const scrollIntoViewOptionsRef = (0, import_useLatest.default)(scrollIntoViewOptions);
241
+ (0, import_react2.useLayoutEffect)(() => {
242
+ if (!open || !targetEl) {
243
+ setRect(null);
244
+ return;
245
+ }
246
+ const update = () => {
247
+ if (rafRef.current !== null)
248
+ cancelAnimationFrame(rafRef.current);
249
+ rafRef.current = requestAnimationFrame(() => {
250
+ setRect(targetEl.getBoundingClientRect());
251
+ });
252
+ };
253
+ update();
254
+ const scrollTargetIfNeeded = () => {
255
+ var _a2;
256
+ const opts = scrollIntoViewOptionsRef.current;
257
+ if (opts === false)
258
+ return;
259
+ if (opts === true) {
260
+ const vr = targetEl.getBoundingClientRect();
261
+ const inViewport = vr.top >= 0 && vr.left >= 0 && vr.bottom <= window.innerHeight && vr.right <= window.innerWidth;
262
+ if (inViewport)
263
+ return;
264
+ }
265
+ try {
266
+ (_a2 = targetEl.scrollIntoView) == null ? void 0 : _a2.call(targetEl, opts);
267
+ } catch (e) {
268
+ }
269
+ };
270
+ scrollTargetIfNeeded();
271
+ window.addEventListener("resize", update);
272
+ window.addEventListener("scroll", update, true);
273
+ return () => {
274
+ if (rafRef.current !== null)
275
+ cancelAnimationFrame(rafRef.current);
276
+ window.removeEventListener("resize", update);
277
+ window.removeEventListener("scroll", update, true);
278
+ };
279
+ }, [open, targetEl, mergedCurrent]);
280
+ (0, import_useEsc.default)({ enabled: open, onEsc: () => onClose == null ? void 0 : onClose() });
281
+ const handleNext = (0, import_react2.useCallback)(() => {
282
+ if (isLast) {
283
+ onFinish == null ? void 0 : onFinish();
284
+ return;
285
+ }
286
+ const nextCur = mergedCurrent + 1;
287
+ setMergedCurrent(nextCur);
288
+ onChange == null ? void 0 : onChange(nextCur);
289
+ }, [isLast, mergedCurrent, onChange, onFinish, setMergedCurrent]);
290
+ const handlePrev = (0, import_react2.useCallback)(() => {
291
+ if (mergedCurrent <= 0)
292
+ return;
293
+ const prevCur = mergedCurrent - 1;
294
+ setMergedCurrent(prevCur);
295
+ onChange == null ? void 0 : onChange(prevCur);
296
+ }, [mergedCurrent, onChange, setMergedCurrent]);
297
+ const cardRef = (0, import_react2.useRef)(null);
298
+ const [cardSize, setCardSize] = (0, import_react2.useState)({ width: 0, height: 0 });
299
+ (0, import_react2.useLayoutEffect)(() => {
300
+ if (!open)
301
+ return;
302
+ const node = cardRef.current;
303
+ if (!node)
304
+ return;
305
+ const r = node.getBoundingClientRect();
306
+ setCardSize({ width: r.width, height: r.height });
307
+ }, [open, step]);
308
+ const cardPos = (0, import_react2.useMemo)(() => {
309
+ if (!cardSize.width || !cardSize.height)
310
+ return null;
311
+ if (rect)
312
+ return computeCardPos(rect, stepPlacement, cardSize, GAP);
313
+ return {
314
+ top: window.innerHeight / 2 - cardSize.height / 2,
315
+ left: window.innerWidth / 2 - cardSize.width / 2
316
+ };
317
+ }, [rect, stepPlacement, cardSize]);
318
+ if (!open || typeof document === "undefined" || !step) {
319
+ return null;
320
+ }
321
+ return (0, import_react_dom.createPortal)(
322
+ /* @__PURE__ */ import_react2.default.createElement("div", __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), style }, rest), mask ? /* @__PURE__ */ import_react2.default.createElement(
323
+ "div",
324
+ {
325
+ className: (0, import_clsx.default)(
326
+ `${prefixCls}-mask`,
327
+ !rect && `${prefixCls}-mask-full`
328
+ ),
329
+ onClick: maskClosable ? onClose : void 0
330
+ }
331
+ ) : null, mask && rect ? /* @__PURE__ */ import_react2.default.createElement(
332
+ import_react.motion.div,
333
+ {
334
+ className: (0, import_clsx.default)(`${prefixCls}-highlight`, classNames == null ? void 0 : classNames.highlight),
335
+ initial: false,
336
+ animate: {
337
+ top: rect.top,
338
+ left: rect.left,
339
+ width: rect.width,
340
+ height: rect.height
341
+ },
342
+ transition: { type: "spring", visualDuration: 0.3, bounce: 0.2 },
343
+ style: styles == null ? void 0 : styles.highlight
344
+ }
345
+ ) : null, /* @__PURE__ */ import_react2.default.createElement(
346
+ import_react.motion.div,
347
+ {
348
+ ref: cardRef,
349
+ className: (0, import_clsx.default)(
350
+ `${prefixCls}-content`,
351
+ classNames == null ? void 0 : classNames.content,
352
+ step == null ? void 0 : step.className
353
+ ),
354
+ initial: false,
355
+ animate: cardPos ? { top: cardPos.top, left: cardPos.left } : { top: 0, left: 0 },
356
+ transition: { type: "spring", visualDuration: 0.3, bounce: 0.2 },
357
+ style: __spreadValues({
358
+ position: "fixed",
359
+ visibility: cardPos ? "visible" : "hidden"
360
+ }, styles == null ? void 0 : styles.content)
361
+ },
362
+ closable ? /* @__PURE__ */ import_react2.default.createElement(
363
+ import_Button.default,
364
+ {
365
+ type: "text",
366
+ className: `${prefixCls}-close`,
367
+ onClick: onClose,
368
+ size: "small",
369
+ icon: closeIcon != null ? closeIcon : /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.X, { size: 16 }),
370
+ "aria-label": tourLocale.skip
371
+ }
372
+ ) : null,
373
+ (step == null ? void 0 : step.title) ? /* @__PURE__ */ import_react2.default.createElement(
374
+ "div",
375
+ {
376
+ className: (0, import_clsx.default)(`${prefixCls}-header`, classNames == null ? void 0 : classNames.header),
377
+ style: styles == null ? void 0 : styles.header
378
+ },
379
+ step.title
380
+ ) : null,
381
+ /* @__PURE__ */ import_react2.default.createElement(
382
+ "div",
383
+ {
384
+ className: (0, import_clsx.default)(`${prefixCls}-body`, classNames == null ? void 0 : classNames.body),
385
+ style: styles == null ? void 0 : styles.body
386
+ },
387
+ step == null ? void 0 : step.description
388
+ ),
389
+ /* @__PURE__ */ import_react2.default.createElement(
390
+ "div",
391
+ {
392
+ className: (0, import_clsx.default)(`${prefixCls}-footer`, classNames == null ? void 0 : classNames.footer),
393
+ style: styles == null ? void 0 : styles.footer
394
+ },
395
+ /* @__PURE__ */ import_react2.default.createElement("span", { className: `${prefixCls}-indicators` }, indicatorsRender ? indicatorsRender(mergedCurrent, total) : `${mergedCurrent + 1} / ${total}`),
396
+ /* @__PURE__ */ import_react2.default.createElement("span", { className: `${prefixCls}-buttons` }, mergedCurrent > 0 ? /* @__PURE__ */ import_react2.default.createElement(import_Button.default, { size: "small", onClick: handlePrev }, tourLocale.previous) : null, /* @__PURE__ */ import_react2.default.createElement(import_Button.default, { type: "primary", size: "small", onClick: handleNext }, isLast ? tourLocale.finish : tourLocale.next))
397
+ )
398
+ )),
399
+ document.body
400
+ );
401
+ };
402
+ Tour.displayName = "Tour";
403
+ var tour_default = Tour;
@@ -39,29 +39,29 @@ var checkable_default = () => {
39
39
  const treeData = [
40
40
  {
41
41
  label: "parent 1",
42
- key: "0-0",
42
+ key: 1,
43
43
  children: [
44
44
  {
45
45
  label: "parent 1-0",
46
- key: "0-0-0",
46
+ key: 10,
47
47
  children: [
48
48
  {
49
49
  label: "leaf",
50
- key: "0-0-0-0"
50
+ key: 100
51
51
  },
52
52
  {
53
53
  label: "leaf",
54
- key: "0-0-0-1"
54
+ key: 101
55
55
  }
56
56
  ]
57
57
  },
58
58
  {
59
59
  label: "parent 1-1",
60
- key: "0-0-1",
60
+ key: 20,
61
61
  children: [
62
62
  {
63
63
  label: "leaf",
64
- key: "0-0-1-0"
64
+ key: 201
65
65
  }
66
66
  ]
67
67
  }
@@ -51,6 +51,8 @@ export * from './Radio';
51
51
  export { default as Radio } from './Radio';
52
52
  export * from './Select';
53
53
  export { default as Select } from './Select';
54
+ export * from './Segmented';
55
+ export { default as Segmented } from './Segmented';
54
56
  export * from './Skeleton';
55
57
  export { default as Skeleton } from './Skeleton';
56
58
  export * from './Space';
@@ -88,6 +90,8 @@ export * from './Steps';
88
90
  export { default as Steps } from './Steps';
89
91
  export * from './Tooltip';
90
92
  export { default as Tooltip } from './Tooltip';
93
+ export * from './Tour';
94
+ export { default as Tour } from './Tour';
91
95
  export * from './Table';
92
96
  export { default as Table } from './Table';
93
97
  export * from './TableSelect';
package/dist/cjs/index.js CHANGED
@@ -75,6 +75,7 @@ __export(src_exports, {
75
75
  Rate: () => import_Rate.default,
76
76
  Reveal: () => import_Reveal.default,
77
77
  Search: () => import_Search.default,
78
+ Segmented: () => import_Segmented.default,
78
79
  Select: () => import_Select.default,
79
80
  Skeleton: () => import_Skeleton.default,
80
81
  Slider: () => import_Slider.default,
@@ -90,6 +91,7 @@ __export(src_exports, {
90
91
  TextArea: () => import_TextArea.default,
91
92
  Timeline: () => import_Timeline.default,
92
93
  Tooltip: () => import_Tooltip.default,
94
+ Tour: () => import_Tour.default,
93
95
  Transfer: () => import_Transfer.default,
94
96
  Tree: () => import_Tree.default,
95
97
  TreeSelect: () => import_TreeSelect.default,
@@ -156,6 +158,8 @@ __reExport(src_exports, require("./Radio"), module.exports);
156
158
  var import_Radio = __toESM(require("./Radio"));
157
159
  __reExport(src_exports, require("./Select"), module.exports);
158
160
  var import_Select = __toESM(require("./Select"));
161
+ __reExport(src_exports, require("./Segmented"), module.exports);
162
+ var import_Segmented = __toESM(require("./Segmented"));
159
163
  __reExport(src_exports, require("./Skeleton"), module.exports);
160
164
  var import_Skeleton = __toESM(require("./Skeleton"));
161
165
  __reExport(src_exports, require("./Space"), module.exports);
@@ -192,6 +196,8 @@ __reExport(src_exports, require("./Steps"), module.exports);
192
196
  var import_Steps = __toESM(require("./Steps"));
193
197
  __reExport(src_exports, require("./Tooltip"), module.exports);
194
198
  var import_Tooltip = __toESM(require("./Tooltip"));
199
+ __reExport(src_exports, require("./Tour"), module.exports);
200
+ var import_Tour = __toESM(require("./Tour"));
195
201
  __reExport(src_exports, require("./Table"), module.exports);
196
202
  var import_Table = __toESM(require("./Table"));
197
203
  __reExport(src_exports, require("./TableSelect"), module.exports);
@@ -78,6 +78,12 @@ export interface LocaleForm {
78
78
  defaultRequiredMessage: string;
79
79
  defaultValidateMessage?: string;
80
80
  }
81
+ export interface LocaleTour {
82
+ previous: string;
83
+ next: string;
84
+ finish: string;
85
+ skip: string;
86
+ }
81
87
  export interface Locale {
82
88
  locale: string;
83
89
  global: LocaleGlobal;
@@ -94,6 +100,7 @@ export interface Locale {
94
100
  popconfirm: LocalePopconfirm;
95
101
  qrcode: LocaleQRCode;
96
102
  form: LocaleForm;
103
+ tour: LocaleTour;
97
104
  }
98
105
  type DeepPath<T extends object, P extends string = ''> = {
99
106
  [K in keyof T]: T[K] extends string ? P extends '' ? `${K & string}` : `${P}.${K & string}` : T[K] extends object ? DeepPath<T[K], P extends '' ? `${K & string}` : `${P}.${K & string}`> : never;
@@ -126,6 +126,12 @@ var locale = {
126
126
  okText: "OK",
127
127
  cancelText: "Cancel"
128
128
  },
129
+ tour: {
130
+ previous: "Previous",
131
+ next: "Next",
132
+ finish: "Finish",
133
+ skip: "Skip"
134
+ },
129
135
  popconfirm: {
130
136
  okText: "OK",
131
137
  cancelText: "Cancel"
@@ -126,6 +126,12 @@ var locale = {
126
126
  okText: "OK",
127
127
  cancelText: "キャンセル"
128
128
  },
129
+ tour: {
130
+ previous: "前へ",
131
+ next: "次へ",
132
+ finish: "完了",
133
+ skip: "スキップ"
134
+ },
129
135
  popconfirm: {
130
136
  okText: "OK",
131
137
  cancelText: "キャンセル"
@@ -117,6 +117,12 @@ var locale = {
117
117
  okText: "确定",
118
118
  cancelText: "取消"
119
119
  },
120
+ tour: {
121
+ previous: "上一步",
122
+ next: "下一步",
123
+ finish: "完成",
124
+ skip: "跳过"
125
+ },
120
126
  popconfirm: {
121
127
  okText: "确定",
122
128
  cancelText: "取消"
@@ -117,6 +117,12 @@ var locale = {
117
117
  okText: "確定",
118
118
  cancelText: "取消"
119
119
  },
120
+ tour: {
121
+ previous: "上一步",
122
+ next: "下一步",
123
+ finish: "完成",
124
+ skip: "跳過"
125
+ },
120
126
  popconfirm: {
121
127
  okText: "確定",
122
128
  cancelText: "取消"
@@ -30,7 +30,7 @@
30
30
  --yee-text-color-description: #7c7c7c;
31
31
  --yee-text-color-disabled: #bfbfbf;
32
32
  --yee-text-color-highlight: #f58220;
33
- --yee-text-color-auxiliary: #bfbfbf;
33
+ --yee-text-color-auxiliary: #f5f5f5;
34
34
  --yee-color-split: #e7e7e7;
35
35
  --yee-border-color: #cbd6e2;
36
36
  --yee-border-color-hover-focus: #75b9f0;
@@ -30,7 +30,7 @@
30
30
  --yee-text-color-description: #8d8d8d;
31
31
  --yee-text-color-disabled: #bfbfbf;
32
32
  --yee-text-color-highlight: #bc463e;
33
- --yee-text-color-auxiliary: #bfbfbf;
33
+ --yee-text-color-auxiliary: #f5f5f5;
34
34
  --yee-color-split: #eeeeee;
35
35
  --yee-border-color: #cccccc;
36
36
  --yee-border-color-hover-focus: #7aadc2;
@@ -30,7 +30,7 @@
30
30
  --yee-text-color-description: #7c7c7c;
31
31
  --yee-text-color-disabled: #bfbfbf;
32
32
  --yee-text-color-highlight: #f58220;
33
- --yee-text-color-auxiliary: #bfbfbf;
33
+ --yee-text-color-auxiliary: #f5f5f5;
34
34
  --yee-color-split: #e7e7e7;
35
35
  --yee-border-color: #cbd6e2;
36
36
  --yee-border-color-hover-focus: #75b9f0;
@@ -598,6 +598,15 @@
598
598
  --yee-select-multi-disabled-tag-border-color: var(--yee-color-split);
599
599
  --yee-select-multi-disabled-tag-bg-color: var(--yee-color-split);
600
600
 
601
+ /* --Segmented-- */
602
+ --yee-segmented-bg-color: var(--yee-color-bg-layout);
603
+ --yee-segmented-item-color: var(--yee-text-color);
604
+ --yee-segmented-item-hover-color: var(--yee-primary-color);
605
+ --yee-segmented-item-selected-color: var(--yee-text-color);
606
+ --yee-segmented-item-disabled-color: var(--yee-text-color-disabled);
607
+ --yee-segmented-thumb-bg-color: var(--yee-color-bg-container);
608
+ --yee-segmented-thumb-box-shadow: 0 2px 8px var(--yee-box-shadow-color);
609
+
601
610
  /* --Slider-- */
602
611
  --yee-slider-track-bg-color: var(--yee-primary-color);
603
612
  --yee-slider-track-bg-hover-color: var(--yee-primary-color-hover);
@@ -954,6 +963,14 @@
954
963
  --yee-tooltip-error-color: #fff;
955
964
  --yee-tooltip-error-bg-color: var(--yee-error-color);
956
965
 
966
+ /* --Tour-- */
967
+ --yee-tour-mask-color: rgba(0, 0, 0, 45%);
968
+ --yee-tour-content-bg-color: var(--yee-color-bg-container);
969
+ --yee-tour-content-box-shadow: 0 6px 16px var(--yee-box-shadow-color);
970
+ --yee-tour-close-color: var(--yee-text-color);
971
+ --yee-tour-title-color: var(--yee-text-color);
972
+ --yee-tour-description-color: var(--yee-text-color-description);
973
+
957
974
  /* --Tree-- */
958
975
  --yee-tree-node-text-hover-bg-color: var(--yee-color-option-hover-bg);
959
976
  --yee-tree-node-text-hover-color: var(--yee-color-option-hover);
@@ -418,6 +418,10 @@
418
418
  --yee-radio-inner-border-width: 1px;
419
419
  --yee-radio-inner-after-width: 10px;
420
420
  --yee-radio-inner-after-height: 10px;
421
+ --yee-radio-font-small-size: 12px;
422
+ --yee-radio-small-padding: 2px;
423
+ --yee-radio-font-large-size: 16px;
424
+ --yee-radio-large-padding: 6px;
421
425
 
422
426
  /* --Rate-- */
423
427
  --yee-rate-star-width: 24px;
@@ -493,6 +497,20 @@
493
497
  --yee-skeleton-active-translate-start: -37.5%;
494
498
  --yee-skeleton-active-translate-end: 37.5%;
495
499
 
500
+ /* --Segmented-- */
501
+ --yee-segmented-padding: 2px;
502
+ --yee-segmented-border-radius: 8px;
503
+ --yee-segmented-item-padding: 4px 12px;
504
+ --yee-segmented-item-border-radius: 6px;
505
+ --yee-segmented-item-gap: 6px;
506
+ --yee-segmented-font-size: 14px;
507
+ --yee-segmented-item-small-padding: 2px 8px;
508
+ --yee-segmented-font-small-size: 12px;
509
+ --yee-segmented-item-large-padding: 6px 16px;
510
+ --yee-segmented-font-large-size: 16px;
511
+ --yee-segmented-thumb-border-radius: 6px;
512
+ --yee-segmented-transition-duration: 0.2s;
513
+
496
514
  /* --Slider-- */
497
515
  --yee-slider-height: 12px;
498
516
  --yee-slider-padding: 4px 0;
@@ -783,6 +801,26 @@
783
801
  --yee-tooltip-arrow-translate-y: 50%;
784
802
  --yee-tooltip-arrow-rotate: -135deg;
785
803
 
804
+ /* --Tour-- */
805
+ --yee-tour-mask-z-index: var(--yee-z-index-mask);
806
+ --yee-tour-content-width: 400px;
807
+ --yee-tour-content-padding: 16px;
808
+ --yee-tour-content-border-radius: 8px;
809
+ --yee-tour-highlight-border-radius: 6px;
810
+ --yee-tour-close-top: 12px;
811
+ --yee-tour-close-right: 12px;
812
+ --yee-tour-close-size: 20px;
813
+ --yee-tour-header-margin-bottom: 8px;
814
+ --yee-tour-title-font-size: 16px;
815
+ --yee-tour-title-font-weight: 600;
816
+ --yee-tour-title-line-height: 24px;
817
+ --yee-tour-description-font-size: 14px;
818
+ --yee-tour-description-line-height: 22px;
819
+ --yee-tour-footer-margin-top: 16px;
820
+ --yee-tour-indicator-gap: 6px;
821
+ --yee-tour-button-gap: 8px;
822
+ --yee-tour-transition-duration: 0.2s;
823
+
786
824
  /* --Tree-- */
787
825
  --yee-tree-node-height: 32px;
788
826
  --yee-tree-node-expand-icon-margin-left: 4px;